ts與vue

ts與Vue

如果你已經學習了typeScript,但不知道如何在vue項目中使用,那么這篇文章將會很適合你。參考千峰教育 kerwin視頻

1.會自動推導,隱士推導。提示

類型系統。

獨立模塊。

isolatedModules選項:是否配置為獨立的模塊。

減少報錯

let name:string = "kerwin"
myname.toFixed()

如果類型過于復雜,就寫any,偷懶的寫法。

對象:

使用接口來寫類型。

對象有超強的提示。

interface Obj{name:string,age:number
}let myobj:Obj
myobj={name:'kerwin',age:100
}

后面接受數據,任意多少都行。

在這里插入圖片描述

函數類型:

function test(a,b){return a+b
}
test(1,2)

選項式api

在這里插入圖片描述

方法寫錯了也能夠自動報錯。

當定義了類型,就會對應相應類型的api。

在這里插入圖片描述

類型斷言。

在這里插入圖片描述

實例對象,你不確定對象上有innerHTML屬性,因為input沒有innerHTML屬性。
在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

props未結合ts的寫法
在這里插入圖片描述

傳遞對象
在這里插入圖片描述

自動補全能力。

import type {Proptype} from 'vue' 這個type怎么理解?

這里的 type 是 TypeScript 的關鍵字,用于類型聲明和類型別名定義。在 Vue.js 中,使用 TypeScript 進行開發時,可以通過 import type 的方式導入一個類型來使用。

具體來說,import type {Proptype} from 'vue' 表示從 vue 模塊中導入一個類型別名為 Proptype 的類型。此處的 Proptype 是 Vue.js 框架中用于定義組件屬性類型檢查的數據類型,它是一個復雜的類型別名,包含了許多其他的類型定義。

通過使用 import type,您可以方便地引用一個類型,而無需同時引入該模塊的其他內容,從而使代碼更加簡潔和可讀。同時,由于 TypeScript 是一種強類型語言,在編寫代碼時使用正確的類型別名也可以幫助您避免一些常見的類型錯誤和 bug。

在這里插入圖片描述

emit事件參數定義類型。檢查類型是否符合標準。

組合式api

在這里插入圖片描述

顯示定義ref
在這里插入圖片描述

另一種寫法

在這里插入圖片描述

DOM元素

在這里插入圖片描述

computed也可以采用泛型的寫法。

未來去引入別人的庫,如果別人的庫用ts寫的,那么我一但.就會提示出來了。

props傳入對象類型的寫法:

在這里插入圖片描述

過于繁瑣:

在這里插入圖片描述

本身就是支持泛型的函數。簡化寫法。在開發的過程中,也會提示你。

emit不會報錯。

在這里插入圖片描述

里面定義函數類型。

路由與ts的結合

在這里插入圖片描述

datalist里面是數組,數組里面每一項是Iitem

里面定義函數類型。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/41701.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/41701.shtml
英文地址,請注明出處:http://en.pswp.cn/news/41701.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

dispatcherServlet在tomcat啟動時如何被加載(1)

目錄 在springboot工程中, 如何添加一個servlet呢? 方法1 : 使用WebServlet注解 方法2 : 使用ServletRegistrationBean進行注冊 springmvc 采用的就是方式2和springboot集成的, 看一下源碼 springboot 字段裝配里面有這個類, 看一下源碼 90行, 創建了一個DispatcherServlet對象…

深入探究Socks5代理與IP代理在網絡安全與爬蟲中的應用

1. Socks5代理:打開網絡隧道的多功能工具 Socks5代理是一種流行的代理協議,它在傳輸層為數據包提供了隧道。相較于之前的版本,Socks5不僅支持TCP連接,還可以處理UDP流量,使其在需要實時數據傳輸的應用中表現出色。在網…

Zabbix配置通用的TCP/IP:port監控項

我們經常的用接口,比如說FTP、HTTP、DNS、數據庫接口,都可以用IP:PORT方式探測其是否存活,那么我們去繁就簡,就簡單監控一下IP:PORT吧! 1、新建主機: 填入主機名稱、群組、Agent就是127.0.0.1…

解決Adobe Flash Player已被屏蔽

問題:該插件不支持 原因:現在瀏覽器默認禁用flash 博主當前使用的是谷歌瀏覽器Chrome 2個主要方法都已經失效 搜索一圈后,之前博客給出的2個主要方法都已經失效。 1、flash.cn 下載本地播放器 2、在chrome中打開flash的禁用開關 2023年解…

LangChain源碼逐行解密之系統(二)

LangChain源碼逐行解密之系統 20.2 serapi.py源碼逐行剖析 我們可以看一下Google查詢的例子,在LangChain中有多種實現的方式。 如圖20-5所示,在utilities的serpapi.py代碼文件中實現了SerpAPIWrapper。 圖20- 5 utilities的serpapi.py的SerpAPIWrapper 在langchain目錄的se…

@pyrallis.wrap()

pyrallis.wrap import pyrallis pyrallis.wrap() 這個pyrallis.wrap()是什么 pyrallis.wrap() 是一個 Python 裝飾器(Decorator),用于將函數或方法包裝在 Pyrallis 框架提供的性能分析器中。裝飾器是 Python 中的一種特殊語法,允許…

如何避免爬蟲IP被屏蔽

各位爬友們好,作為一名專業的爬蟲代理提供者,我要和大家分享一些避免爬蟲IP被屏蔽的實用技巧。你知道嗎,當我們爬取數據的時候,很容易被目標網站識別出來并封禁我們的IP地址,導致無法繼續爬取數據。這個問題困擾了很多…

7. 實現 API 自動生成

目錄 1. pom.xml中引用依賴 2. 引入相關的依賴 3. 編寫配置類 4. application.yml 中添加配置 5. API 常用注解 6. 訪問 API 列表 7. API 導入 Postman 使用 Springfox Swagger生成 API,并導入 Postman,完成API單元測試。 Swagger 簡介:Swag…

執行Lua腳本后一直查詢不到Redis中的數據(附帶問題詳細排查過程,一波三折)

文章目錄 執行Lua腳本后一直查詢不到Redis中的數據(附帶詳細問題排查過程,一波三折)問題背景問題1:Lua腳本無法切庫問題2:RedisTemlate切庫報錯問題3:序列化導致數據不一致問題4:Lua腳本中單引號…

Etcd備份及恢復

一、Etcd數據備份 1、備份命令 [rootlocalhost ~]# export ETCDCTL_API3 [rootlocalhost ~]# /data/etcd-3.4.9/bin/etcdctl --endpoints10.2.20.108:2379 snapshot save etcd-date "%Y-%m-%d_%H-%M-%S".snapshot 2、備份完成后會在當前目錄生成備份文件 [rootlo…

vue實現打印功能

在Vue應用中調用打印機功能,可以使用JavaScript的window.print()方法。這個方法會打開打印對話框,然后讓我們選擇打印設置并打印文檔,但是尼這種方法依賴于瀏覽器的打印功能。 以下是一個簡單的示例,演示如何在Vue組件中調用打印…

Linux Tracing Technologies

目錄 1. Linux Tracing Technologies 1. Linux Tracing Technologies Linux Tracing TechnologieseBPFXDPDPDK

Flask Web開發實戰(狼書)| 筆記第1、2章

前言 2023-8-11 以前對網站開發萌生了想法,又有些急于求成,在B站照著視頻敲了一個基于flask的博客系統。但對于程序的代碼難免有些囫圇吞棗,存在許多模糊或不太理解的地方,只會照葫蘆畫瓢。 而當自己想開發一個什么網站的時&…

ubuntu部署haproxy

HAProxy是可提供高可用性、負載均衡以及基于TCP和HTTP應用的代理. 1、更新系統報 通過在終端中運行以下命令,確保所有系統包都是最新的 sudo apt updatesudo apt upgrade2、安裝Haproxy sudo apt install haproxy設置開機自動啟動haproxy服務 sudo systemctl en…

Lnton羚通關于如何解決nanoPC-T4 upgrade報錯問題?

nanoPC-T4 在 ??# sudo apt update 和 sudo apt upgrade??升級或安裝軟件 ??sudo apt install xxx??時遇到以下問題:??Failed to set up interface with /etc/hostapd/? Setting up hostapd (2:2.6-15ubuntu2.8) ... Job for hostapd.service failed be…

ssm+vue醫院住院管理系統源碼和論文PPT

ssmvue醫院住院管理系統源碼和論文PPT012 開發工具:idea 數據庫mysql5.7(mysql5.7最佳) 數據庫鏈接工具:navcat,小海豚等 開發技術:java ssm tomcat8.5 摘 要 隨著時代的發展,醫療設備愈來愈完善,醫院也變成人們生…

基于IMX6ULLmini的linux裸機開發系列一:匯編點亮LED

思來想去還是決定記錄一下點燈,畢竟萬物皆點燈嘛 編程步驟 使能GPIO時鐘 設置引腳復用為GPIO 設置引腳屬性(上下拉、速率、驅動能力) 控制GPIO引腳輸出高低電平 使能GPIO時鐘 其實和32差不多 先找到控制LED燈的引腳,也就是原理圖 文件名 C:/Us…

spring頭約束(全部)

文章目錄 spring-mvcspring-aopspring-txspring-contextspring-taskspring-cachespring-jdbcp命令空間spring-jeejmslangoxmutil總結 spring-mvc <beans xmlns"http://www.springframework.org/schema/beans" xmlns:xsi"http://www.w3.org/2001/XMLSchema-…

AUTOSAR NvM Block的三種類型

Native NVRAM block Native block是最基礎的NvM Block&#xff0c;可以用來存儲一個數據&#xff0c;可以配置長度、CRC等。 Redundant NVRAM block Redundant block就是在Native block的基礎上再加一個冗余塊&#xff0c;當Native block失效&#xff08;讀取失敗或CRC校驗失…

劍指offer44.數字序列中某一位的數字

最后一道題&#xff0c;我一定要自己做出來&#xff0c;想了不到一個小時想法差不多成熟了&#xff0c;但是有一個小細節出問題了&#xff0c;這個問題我在idea上debug都沒debug出來。我先講我的題解然后再講我這個小問題出在哪里吧。以下是我的代碼&#xff1a; class Soluti…