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

相关推荐
某公司摸鱼前端16 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~18 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程23 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏24 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron