vue框架中props的typescript用法詳解
什么是typescript
typescript 為 javaScript的超集,這意味著它支持所有都JavaScript都語(yǔ)法。它很像JavaScript都強(qiáng)類型版本,除此之外,它還有一些擴(kuò)展的語(yǔ)法,如interface/module等。
typescript 在編譯期會(huì)去掉類型和特有語(yǔ)法,生成純粹的JavaScript。
Typescript 5年內(nèi)的熱度隨時(shí)間變化的趨勢(shì),整體呈現(xiàn)一個(gè)上升的趨勢(shì)。也說明ts越來越️受大家的關(guān)注了。
在vue中使用typescript時(shí),需要引入vue-property-decorator
庫(kù)來兼容格式。
javascript寫法
Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' })
typescript寫法
@Prop({ type: Array, default: function(): Array<LabelData> { return []; } }) label_list: Array<LabelData> | undefined;
typescript和javascript在用法的區(qū)別,主要是需要嚴(yán)格規(guī)定label_list的類型。
但是,在vue里面,prop是不能賦初始值的。這個(gè)規(guī)則和typescript會(huì)發(fā)生矛盾,因此定義類型需要加undefined,避免typescript轉(zhuǎn)義告警。
在代碼中使用label_list時(shí),需要用label_list as Array的語(yǔ)法,轉(zhuǎn)換成正常的數(shù)組格式
參考鏈接
總結(jié)
以上所述是小編給大家介紹的vue框架中props的typescript用法詳解,希望對(duì)大家有所幫助!
相關(guān)文章
vue項(xiàng)目中swiper輪播active圖片實(shí)現(xiàn)居中并放大
這篇文章主要介紹了vue項(xiàng)目中swiper輪播active圖片實(shí)現(xiàn)居中并放大方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue3 Composition API的使用簡(jiǎn)介
這篇文章主要介紹了Vue3 Composition API的使用簡(jiǎn)介,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下2021-03-03vue3實(shí)現(xiàn)移動(dòng)端滑動(dòng)模塊
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)移動(dòng)端滑動(dòng)模塊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法
今天小編就為大家分享一篇Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue3使用el-radio-group獲取表格數(shù)據(jù)無(wú)法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無(wú)法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式
這篇文章主要介紹了vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03