vue框架中props的typescript用法詳解
什么是typescript
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。它很像JavaScript都強(qiáng)類型版本，除此之外，它還有一些擴(kuò)展的語法，如interface/module等。
typescript 在編譯期會(huì)去掉類型和特有語法，生成純粹的JavaScript。
Typescript 5年內(nèi)的熱度隨時(shí)間變化的趨勢(shì)，整體呈現(xiàn)一個(gè)上升的趨勢(shì)。也說明ts越來越️受大家的關(guān)注了。
在vue中使用typescript時(shí)，需要引入vue-property-decorator庫來兼容格式。
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的語法，轉(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-05
Vue3 Composition API的使用簡(jiǎn)介
這篇文章主要介紹了Vue3 Composition API的使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue computed計(jì)算屬性的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue3實(shí)現(xiàn)移動(dòng)端滑動(dòng)模塊
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)移動(dòng)端滑動(dòng)模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue-router 切換組件頁面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法
今天小編就為大家分享一篇Vue-router 切換組件頁面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue封裝上傳圖片和視頻的組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式
這篇文章主要介紹了vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03