element-plus 组件没代码颜色标识 组件显示unknown 组件类型无法被编辑器正确识别

问题:

在项目开发中偶现该问题:
vscode编辑器中 element组件的类型无法正确的被识别 鼠标悬浮提示为unkown，也没有相应的属性提示，在写代码的时候非常不方便。
示例图:

解决方法:

在tsconfig.app.json配置以下属性

"compilerOptions": {
    "types": ["element-plus/global"],
  }

在此打开项目或重启vscode即可看见相应的类型提示:

解析:

知其然更要知其所以然,为什么添加该属性之后就可以用了？

tsconfig.json 文件中，compilerOptions 是一个对象，它包含了 TypeScript 编译器的配置选项。在这里，types 是一个属性，它指定了要包含的类型声明文件的列表。
element-plus/global 这一项告诉 TypeScript 编译器要包含 Element Plus 这个库的全局类型声明文件。

在声明该属性之后·TypeScript· 编译器在编译你的代码时会执行以下步骤:

• 查找类型声明文件：TypeScript 编译器会尝试在项目中的 node_modules/@types目录下查找 element-plus 这个库的类型声明文件。如果找到了，则会读取该文件中定义的类型信息。
• 合并类型声明：如果在 node_modules/@types 目录下找不到 element-plus 的类型声明文件，TypeScript 会检查 compilerOptions 中的 types 配置项，并在其中查找指定的类型声明文件。在这种情况下，它会尝试去寻找项目中指定的 element-plus/global 类型声明文件。
• 类型检查和自动补全：一旦 TypeScript 编译器成功地找到了 Element Plus 的类型声明文件，它就会将这些声明文件中定义的类型信息与你的代码进行对比，进行类型检查，以确保你在使用 Element Plus 的 API 时不会出现类型错误。同时，它还会提供自动补全功能，帮助你更轻松地编写代码。

总结 了解到上述的原因后就可以知道为什么在安装某些第三方包时，没有类型提示的时候会需要专门下载相应的类型文件到node_modules/@types中，因为TypeScript编译器中会默认读取node_modules/@types中的类型文件,来增加代码检查和类型提示。

如果这篇文章对您有所帮助，还望点赞关注收藏三连！！，后续更新更多内容