如何在vue3中同时使用tsx与setup语法糖_vue.js

前言

想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法.

Tsx与setup语法糖的优势

目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持.tsx带来的优势可能给我的感受最直接的就是更像是在写js代码.

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

遇到的问题

这是在用tsx编写vue组件时,遇到的props的问题,可以看到props的声明占据了大量篇幅,同时type的写法也比较复杂,如果在加上required字段,需要的篇幅会更大.

这样声明props的方式并不优雅,所以想起了setup语法糖下的defineProps函数.经过测试,defineProps在非setup语法糖下无法使用,但使用setup语法糖,就不支持Tsx了.为了优雅,于是采取了一个折中的办法:

可以看到,文件还是.vue文件,在script标签里使用了lang="tsx"与 setup语法糖,这样做的好处是,定义了一个props的inferface,直接就可以在defineProps的泛型处使用,同时表示是否必要(required)只需要使用ts中的?(可选属性)即可.默认属性可以通过withDefaults实现:

最后

最下面还是用到了template标签仿佛有点自欺欺人,同时在这种写法下,vscode插件对于tsx标签的自动补全并不友好,可能还需要更多的支持,但是这样的props类型声明确实更加优雅,同时setup语法糖也是真香!