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

前言

想这样做的原因是在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语法糖也是真香!

到此这篇关于如何在vue3中同时使用tsx与setup语法糖的文章就介绍到这了,更多相关 vue3使用tsx与setup内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！