什么是 TypeScript 声明文件
TypeScript 声明文件是用来描述 JavaScript 代码库中 API 接口的描述文件，可以让 TypeScript 在编译阶段进行类型检查和编译优化。当使用 JavaScript 库开发 TypeScript 代码时，我们需要给 TypeScript 提供一个对应库的类型声明文件。这个时候就需要用到 TypeScript 的声明文件。
声明文件的后缀名是 .d.ts，可以使用 npm 下载别人写好的声明文件。
如何创建一个声明文件
在 TypeScript 中声明文件可以有两种创建方式：使用两个特殊的 jsdoc 标记或者使用 TypeScript 语法。
使用 jsdoc 标记
使用 jsdoc 标记是比较常用的一种方式，特别是当我们想要为某个已经存在的 JavaScript 库创建一个 TypeScript 声明文件时，使用这种方式可以省去很多工作量。
以 axios 库为例，我们需要先创建一个名为 axios.d.ts 的文件，在文件中编写以下内容：
-- -------------------- ---- -------
---
- ----- --
--
------- ------ ------- -
------ --------- ------------------ -
----- -------
-------- -------
------ ----
--------- ----
-
------ --------- --------------- - ---- -
----- --
------- -------
-
------ --------- ------------ - ---- ------- ----- -
------- -------------------
---------- -----------------
------ -------
--------- ----
-
------ --------- ------------- -
-------- -------------------- -----------------------
------------ -
-------- -
------------ -------- ------------------- -- ------------------ - ----------------------------- ----
-
--------- -
------------ ---------- -------------- -- ------------- - ------------------------ ----
-
-
-
------ ----- ------ --------------
-在上述代码中，declare module 'axios' 告诉 TypeScript 我们为 axios 模块创建了一个类型定义，接着定义了 AxiosRequestConfig、AxiosResponse 和 AxiosError 等接口，用来描述 axios 库的 API。在 AxiosInstance 中定义了 axios 的一个实例，包括请求拦截器和响应拦截器等。
这个时候，我们就可以在 TypeScript 项目中通过以下方式使用 axios 库了：
import { axios } from 'axios';
axios({
url: '/api/getData',
method: 'get',
}).then((res) => console.log(res));使用 TypeScript 语法
使用 TypeScript 语法来创建声明文件时，我们需要先理解一些 TypeScript 的语法规则。
声明一个全局变量，我们可以这样写：
declare var foo: string;
表示全局变量 foo 的值为字符串类型。
如果是导入了一个外部模块，我们可以这样写：
declare module "foo" {
export const a: string;
export function b(): void;
export default foo;
}表示导入的模块 foo，包含了一个变量 a、函数 b 和默认导出的对象 foo。
如何使用声明文件
使用其他人写好的 TypeScript 声明文件时，我们可以使用以下两种方式：
// 通过 npm 安装 npm install @types/jquery
// 直接引入 <script src="./jquery.d.ts"></script>
在 TypeScript 中引入声明文件时，我们需要按照以下步骤：
- 打开 TypeScript 配置文件
tsconfig.json，确保compilerOptions中typeRoots包含了 npm 下载的声明文件目录，或者文件include选项包含了声明文件目录，如下：
-- -------------------- ---- ------- - ------------------ - ------------ ------------------------- ------------- --------- ----------- --------- ------ ------ ---------- ------ -- ---------- -------------- ----------------- ----------------------------- -- 在 TypeScript 文件中导入要用到的外部库：
// 导入 jQuery 库 import $ from 'jquery'; $('#app').text('Hello World');- 打开 TypeScript 配置文件
总结
在 TypeScript 中，声明文件是非常重要的，能够有效地帮助我们提高开发效率和代码质量，同时还能让代码更加健壮和可维护。在使用外部库时需要注意，必须提供其类型定义文件，否则会导致 TypeScript 编译器无法正确处理和优化代码。
声明文件的创建和使用也不是一件非常困难的事情，只需要掌握一些基本的语法规则就可以了。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aed1cd48841e9894b03aad