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

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

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

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

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

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

不过，这并不是特别严重的残疾，解决方法如下：

1 直接引入这个组件

以 vue3 ＋ element-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．