likes
comments
collection
share

缺少UI库类型提示,你可能使用的是阉割版的Volar+Vue3

作者站长头像
站长
· 阅读数 35

先说一下什么是类型提示,在Vue3+Volar中,UI组件会像一个typescript对象一样,告诉你它有哪些属性.

例如鼠标悬浮在el-button上,会显示它对应的一些属性.

缺少UI库类型提示,你可能使用的是阉割版的Volar+Vue3

你在组件上键入属性的时候也会给予你像typescript一样的编写建议.

缺少UI库类型提示,你可能使用的是阉割版的Volar+Vue3

如果你使用的是自己本地编写的组件,你将完美地享受到这一功能,但如果你使用的是像ant-design-vue或者element-plus一样的组件库,在未进行配置的情况下,你会遇到下面这种情况.

组件提示是any对象,volar无法为你的UI组件库提供任何提示.这相当于你在用残废版的volar+vue3

缺少UI库类型提示,你可能使用的是阉割版的Volar+Vue3 不过,这并不是特别严重的残疾,解决方法如下:

1 直接引入这个组件

vue3element-plus 为例,如果需要添加类型提示, 你可以直接在vue文件中引入这个组件.

<template>
  <div>
    <el-button></el-button>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from "element-plus"
</script>

这种方法将ElButton视同于你本地编写的组件,通过主动引入的方式获得了类型提示.

如果是少量引入的话,这种办法并无不妥.

2 通过 tsconfig.json 进行引入

打开 node_modules/element-plus/global.d.ts , 你会看到这么一个东西,

// GlobalComponents for Volar
declare module 'vue' {
  export interface GlobalComponents {
    // ...
  }
}

注释上写着为 Volar 准备的全局组件.但从刚刚的实验来看,很明显我们的Volar没用上它.

实际上,我们需要用tsconfig.json帮助Volar用上这个ts声明文件.

修改根目录的tsconfig.json, 修改include,让ts主动接受这个声明文件.

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext""dom"],
    "types": ["vite/client", "element-plus/global"],  // <<<<<<<<<<-------添加这一行,ant-design-vue同理
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

结语

以小见大,如果以后遇到ts类型提示需要全局引入,而不是一个个import的话,就可以修改tsconfig.json