vue框架中props的typescript用法詳解
更新時間：2020年02月17日 14:22:27 作者：洪庸
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下
什么是typescript
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。它很像JavaScript都強類型版本，除此之外，它還有一些擴展的語法，如interface/module等。
typescript 在編譯期會去掉類型和特有語法，生成純粹的JavaScript。
Typescript 5年內(nèi)的熱度隨時間變化的趨勢，整體呈現(xiàn)一個上升的趨勢。也說明ts越來越️受大家的關注了。
在vue中使用typescript時，需要引入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ū)別，主要是需要嚴格規(guī)定label_list的類型。
但是，在vue里面，prop是不能賦初始值的。這個規(guī)則和typescript會發(fā)生矛盾，因此定義類型需要加undefined，避免typescript轉義告警。
在代碼中使用label_list時，需要用label_list as Array的語法，轉換成正常的數(shù)組格式
參考鏈接
總結
以上所述是小編給大家介紹的vue框架中props的typescript用法詳解，希望對大家有所幫助！
相關文章
這篇文章主要介紹了vue解決彈出蒙層滑動穿透問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本文主要介紹了vue中給路徑起別名的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue?vant使用ImagePreview實現(xiàn)預覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實現(xiàn)預覽圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中動態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
生命周期分為四個對子，根據(jù)不同的情況使用不同的函數(shù)，這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue從倉庫state中取不到數(shù)據(jù)的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關于在Vue項目中使用mock.js的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01