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

相关推荐
一枚前端小能手39 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码39 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA91 小时前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登1 小时前
【CSS】层叠上下文和z-index
前端·css
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus1 小时前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia1 小时前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_928411561 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pedantic1 小时前
SwiftUI ShareLink – 显示分享表单的使用
前端