前言

想這樣做的原因是在vue3里使用tsx開發(fā)時,props的聲明顯得異常麻煩,不禁想到defineProps的便利,但同時在vue3里tsx文件里tsx語法的書寫必須在setup函數或者render函數里,無法正常的使用defineProps等一系列的宏.為了能夠更加便利,使用了下文的方法.

Tsx與setup語法糖的優(yōu)勢

目前,在vue3中使用tsx已經越來越流行且便捷,對于webpack與vite構建的項目,都有很好的插件支持.tsx帶來的優(yōu)勢可能給我的感受最直接的就是更像是在寫js代碼.

同時,vue3的setup語法糖的便利也深入人心,不需要return,不需要聲明components,并且提供了defineProps等等方便的宏.

遇到的問題

這是在用tsx編寫vue組件時,遇到的props的問題,可以看到props的聲明占據了大量篇幅,同時type的寫法也比較復雜,如果在加上required字段,需要的篇幅會更大.

這樣聲明props的方式并不優(yōu)雅,所以想起了setup語法糖下的defineProps函數.經過測試,defineProps在非setup語法糖下無法使用,但使用setup語法糖,就不支持Tsx了.為了優(yōu)雅,于是采取了一個折中的辦法:

可以看到,文件還是.vue文件,在script標簽里使用了lang="tsx"與 setup語法糖,這樣做的好處是,定義了一個props的inferface,直接就可以在defineProps的泛型處使用,同時表示是否必要(required)只需要使用ts中的?(可選屬性)即可.默認屬性可以通過withDefaults實現:

最后

最下面還是用到了template標簽仿佛有點自欺欺人,同時在這種寫法下,vscode插件對于tsx標簽的自動補全并不友好,可能還需要更多的支持,但是這樣的props類型聲明確實更加優(yōu)雅,同時setup語法糖也是真香!

到此這篇關于如何在vue3中同時使用tsx與setup語法糖的文章就介紹到這了,更多相關 vue3使用tsx與setup內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！