解锁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标签、插槽,都会有相应的提示了。

相关推荐
10年前端老司机2 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js