声明文件

typescript中以.d.ts为后缀的文件被称为声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能

声明文件分为三种类型

• typescript 内置声明文件
• 第三方声明文件
• 自定义声明文件

区分声明语句和声明文件

什么是声明语句

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 <script> 标签引入 jQuery，然后就可以使用全局变量 $ 或 jQuery 了

$("#foo");
// or
jQuery("#foo");

但是在 ts 中，编译器并不知道 $ 或 jQuery 是什么东西

jQuery("#foo"); // ERROR: Cannot find name 'jQuery'.

这时，我们需要使用 declare var 来定义它的类型

declare var jQuery: (selector: string) => any;
jQuery("#foo");

---

什么是声明文件

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件

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

// index.ts
jQuery("#foo");

注意

声明文件必需以 .d.ts 为后缀

第三方声明文件

如果在项目中使用某一个第三方库，通常也需要安装该库的声明文件，这样 typescript 能够对该库的代码进行类型检查，同时也提供该库的类型提示

这里我们用jQuery做例子

当然，jQuery 的声明文件不需要我们定义了，社区已经帮我们定义好了jQuery in DefinitelyTyped 我们可以直接下载下来使用

直接用 npm 安装对应的声明模块即可

npm install @types/jquery --save-dev

当然你还需在项目中引入 jQuery

自定义声明文件

当一个第三方库(公司内部提供的库)没有提供声明文件时，我们就需要自己书写声明文件了

// add.js
function add(x, y) {
  console.log(x, y);
}

编写声明文件

// add.d.ts
declare function add(x: number, y: number): void;

// index.ts
add(10, 20);

注意

此时注意：如果add.d.ts没有被打开，仍然不可以使用，可以配置tsconfig.json文件

{
  "files": ["add.d.ts", "index.ts"]
}