TypeScript 错误解决：缺少引用声明文件

TypeScript 是一款不错的编程语言，前端开发者可以使用它来增强代码的可读性、可维护性和代码提示功能。然而，有时候我们使用第三方库或者常规库时，会遇到一个错误："找不到名称 'xxx'"，很多时候这并不是因为我们写错了代码，而是因为缺少初始化配置文件或者缺少相应的引用声明文件（*.d.ts）。

那么，该如何解决呢？

缺少初始化配置文件

使用 TypeScript 是必须有配置文件 tsconfig.json 的，如果你没有这个文件，需要执行以下命令来初始化配置文件：

tsc --init

这个命令会自动创建一个 tsconfig.json 配置文件，该文件包含了 TypeScript 编译器的所有配置项。如果你的项目根目录下已经存在该文件，可以使用以下命令来重新生成它：

tsc --init --force

然后你就可以在该文件中添加一些特定配置项，比如在 compilerOptions 中添加 "target": "es6"，为你的代码指定使用的 JavaScript 版本。

缺少引用声明文件

引用声明文件用来提供第三方库的类型定义，这个设计的初衷是为了 TypeScript 能够我们使用第三方库时，拥有智能提示和类型检查的功能。TS 编译器会解析 *.d.ts 文件来检查你的代码。 如果你在代码中使用了一个接口、函数、变量等，而 TypeScript 无法从你的代码中推断出其类型，此时你需要使用类型声明文件来告诉 TypeScript 相关信息。

一个典型的类型声明文件如下所示：

// jQuery.d.ts
declare var jQuery: (selector: string) => any;

这个文件告诉 TypeScript，当你使用 jQuery 变量时，它应该是一个参数为 string 类型，返回值为 any 类型的函数。

如果你确实遇到了 "找不到名称 'xxx'" 的错误，可以使用以下解决办法：

1. 在 @types 中找到相应的类型声明

许多常用的 JavaScript 库和框架都已经有了官方的类型声明文件，你可以搜索 @types/xxx 来找到相关的类型声明。比如，如果你想使用 jQuery 接口，可以在 @types 中找到 jquery 并安装它：

npm install --save-dev @types/jquery

现在，你的 TypeScript 应该可以使用全局 jQuery 变量，并且如果你尝试使用不正确的方法，编译器会提供错误提示。

如果没有相应的类型声明，你需要自己编写。如果你只需要一个简单的类型声明，可以尝试使用唯一的类型引用（Triple-Slash Directives）来引用你的声明文件，如下所示：

/// <reference path="path/to/declaration/file.d.ts" />

这会告诉 TypeScript 编译器去读取 path/to/declaration/file.d.ts，并在代码中使用类型。

2. 手动在项目中添加声明文件

你也可以手动添加声明文件到项目中。如果你添加的是一个全局类型声明，应该存储在项目的根目录，然后在 tsconfig.json 中将 files 或 include 添加到声明文件。

如果你添加的是一个局部类型声明，推荐将其存储在你正在使用的库的文件夹中，例如 src/libs/my-lib/index.d.ts。然后，在你的 TypeScript 源代码中添加以下一行，告诉编译器去读取这个文件：

import 'libs/my-lib';

这会告诉 TypeScript 编译器，在编译期间添加 lib/my-lib/index.d.ts 文件到你的项目。

总之，当你遇到 "找不到名称 'xxx'" 的错误，建议先使用 @types 来查找或添加类型声明文件。如果还没有，你就需要自己开始添加类型声明文件。

示例代码

以下是一个简单的 TypeScript 代码示例，使用了一个未声明的局部变量。在这个例子中，我们模拟了一种情况，当你在使用 my-lib 库时忘记引入类型定义文件：

import myLib from 'my-lib';

const obj = { data: 'Hello world' };
myLib.doSomethingNice(obj); // Error: cannot find name 'myLib'

为了解决这个 "cannot find name 'myLib'" 错误，我们可以按照上述方法，手动添加声明文件，或者使用 @types 命令，安装拥有 my-lib 类型声明的库。

npm install --save-dev @types/my-lib

现在，我们就可以引用 myLib 变量，并在其上调用方法，如下所示：

import myLib from 'my-lib';

const obj = { data: 'Hello world' };
myLib.doSomethingNice(obj); // Good, no error reported

结论

无论出现缺少引用声明文件的错误是因为少了哪个库的类型声明，都需要我们对于它的出现，积极採取解决办法。这样才能提高我们编写的 TypeScript 代码的可读性、可维护性，以及代码提示功能。希望这篇文章能够帮助你解决 TypeScript 编译时的错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674be627d657e1f70dc36ffe