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
里面定義函數類型。