关于TS报错：error TS7022 问题分析与解决

目录

报错信息

问题分析

报错信息的中文：

报错出现的原因：

解决问题

显示声明类型：

更改导入文件：

---

报错信息

当运行 npm run build 时，出现以下报错

error TS7022: '__VLS_1' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

问题分析

报错信息的中文：

'__VLS_1' 隐式具有类型 "any"，因为它不具有类型批注，且在其自身的初始化表达式中得到直接或间接引用。

报错出现的原因：

自定义了比较复杂的组件，如图中的FileUpload、PluginEditer均为自定义组件。

且我对它的引入方式是直接引入.vue文件。

综合导致，此时的ts没有识别组件的类型，所以需要我们显式声明其类型。

解决问题

显示声明类型：

• 新建一个.ts的文件，导入原本的.vue文件，再利用 TypeScript 的类型声明来明确指出导出对象的类型。

这里使用了 TypeScript 的语法糖，用来说明导出对象的类型是 typeof FileUpload。typeof 运算符获取某个变量或对象的实际类型，因此这里的含义是“以 FileUpload 的类型导出”。

这样做是因为需要确保导出的类型信息对于其他部分的代码（特别是使用 TypeScript 的项目）是准确的。

这种模式在编写库或者组件时比较常见，有助于提供更好的类型支持和开发体验。

更改导入文件：

在使用该组件的地方，更改原先的 import 语句。

• 将原本导入的.vue文件，改为新增的.ts文件。

当然，如果文件格式如下图，可以直接写到文件夹，会默认指向里面的 index.ts 文件。

 · 

做完以上操作，再次进行 npm run build 的时候，就可以成功啦 ~