解锁Vue3完全体:全完备的TS支持

Vue对于TS的支持一直令人诟病,从V2~V3,一直都是不完备的。 最近Volar大版本更新,变成了Vue - Official之后,更多BUG来了;编辑器卡顿、一点提示都不出......纷至沓来,更是让大家伙儿的印象更加的差。这篇文章就来擦擦屁股:论如何在Vue3中得到完备的类型支持😎

解决方案一:舍弃.vue模版,向TSX靠齐

没错!这个方法应该是所有人都知道的:使用TSX语法,这样就和React差不多,能得到TypeScript支持,而TypeScript和VSCode又本来就是同一家人,所以从语言到编辑器,全套下来都是能拥有完整的类型安全的😋

jsx 复制代码
interface Props {}

export function Test({}: Props) {
  return <div></div>
}

这是一种类似React的写法,还有一种是老版Vue Options的写法:

ts 复制代码
export const Test = defineComponent({
  setup() {}
})

两种写法都能实现类型安全,但是前提---------

得用TSX。

解决方案二:使用auto import

unplugin-auto-import隶属unjs旗下,本质和Vue是一家人。

有些人好奇为什么用auto-import就有类型提示了:其实很简单,因为用了auto-import之后,它会动态生成d.ts文件。

我们在创建完一个新vue项目之后,如果碰到类型出问题,很多时候都会在env.d.ts里加入这样一段代码:

ts 复制代码
declare module '*.vue' {
  import type { DefineComponent } from 'vue'

  const component: DefineComponent<object, object, any>
  export default component
}

如果加上了这个代码,而没有使用auto-import,就会导致所有的Vue模版都会指向这个env.d.ts文件,所以才一直令人诟病。

说到这里可能大多数人已经明白我的意思了,特别是用过antfu大佬的Vitesse这个模版的,可以知道它是有完整的类型提示的,原理就是使用了auto-import

加上这个插件之后,直接设置一下d.ts要生成到哪儿,以及哪些.vue文件需要被auto-import,这样无论是Prop、组件Tag标签、插槽,都会有相应的提示了。

相关推荐
楼田莉子1 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝1 小时前
Vue总结
前端·javascript·vue.js
木易 士心2 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER2 小时前
Web 开发 21
前端·学习
又是忙碌的一天2 小时前
前端学习day01
前端·学习·html
Joker Zxc2 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel2 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld2 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端
不会算法的小灰3 小时前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
zero13_小葵司3 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js