TypeScript中的类型声明declare

一、declare基本用法介绍

在TypeScript中，declare关键字用于定义全局变量、函数和类型等，提供了一种在编译过程中告诉TypeScript编译器某个标识符的类型的方式。它告诉编译器：虽然它在当前文件中没有声明，但它在其他地方已经存在了。也就是说，declare让编译器知道这些声明的实体是在编译阶段存在的，而不是在运行时。

使用declare关键字的目的是为了告诉TypeScript编译器，某个标识符的声明位于其他地方，不需要进行编译器级别的检查。它在以下几个方面有用：

1. 声明第三方库

在TypeScript中，如果要使用第三方库，需要安装对应的类型声明文件。但是有些第三方库可能没有相关声明文件，这时候可以使用declare语句来告诉编译器该库的存在，使其不会报错。

例如，要使用全局变量lodash，可以通过以下方式声明：

declare var _: any;

这样就可以在代码中使用_变量，而不会报错。

2. 声明全局变量

有时候我们需要在代码中使用一些全局变量，但是这些变量并没有在当前文件中声明。可以使用declare来告诉编译器该变量的类型。

例如，要使用全局变量Config，在代码中可以这样声明：

declare var Config: {
  apiUrl: string;
  apiKey: string;
};

这样就可以在代码中使用Config.apiUrl和Config.apiKey，而不会报错。

3. 声明全局函数和方法

有时候我们需要使用一些全局函数或方法，但是这些函数或方法并没有在当前文件中声明。可以使用declare来告诉编译器这些函数或方法的类型。

例如，要使用全局函数sum，在代码中可以这样声明：

declare function sum(a: number, b: number): number;

这样就可以在代码中调用sum函数，而不会报错。

总结起来，declare关键字在TypeScript中用于声明全局的变量、函数和类型等，在编译过程中告诉TypeScript编译器某个标识符的类型和存在方式，使其不会报错。它在使用第三方库、声明全局变量、声明全局函数和方法等场景下都很有用。

二、 手动编写声明文件

在TypeScript中，可以手动编写声明文件来为第三方库或模块添加类型定义。声明文件的命名约定为*.d.ts，例如jquery.d.ts。

编写声明文件的方法有三种：

1. 全局声明：通过declare关键字，直接声明全局变量、函数或命名空间。

例如，对于全局变量$和全局函数myFunction，可以这样编写声明文件：

declare const $: JQueryStatic;

declare function myFunction(a: number, b: number): number;

2. 模块声明：通过declare module关键字，为模块添加类型定义。

例如，对于模块myModule，可以这样编写声明文件：

declare module 'myModule' {
  export function myFunction(): void;
  export const myVariable: number;
}

3. 扩展声明：通过声明全局的模块依赖，为已有模块添加类型定义。

例如，自动化构建工具gulp没有官方的类型声明文件，可以通过扩展声明为其添加类型定义：

declare module 'gulp' {
  function task(name: string, cb: () => void): void;
  export = task;
}

当引入第三方库或模块时，TypeScript会按以下顺序查找声明文件：

1. 先查找默认位置：TypeScript会在和引入的模块相同的文件夹下寻找名为index.d.ts的声明文件。

2. 遍历node_modules：TypeScript会从当前文件所在的目录开始，逐级向上遍历父级目录中的node_modules文件夹，按照引入模块的路径寻找相应的声明文件。

3. 与声明文件同名的 JavaScript 文件：如果找不到声明文件，TypeScript会查找与引入模块文件同名的 JavaScript 文件，并尝试解析其中的类型。

在tsconfig.json中，可以配置以下选项来辅助声明文件的编译：

• typeRoots：指定额外的类型声明文件的搜索位置，通常用于指定全局声明文件的位置。
• include：指定哪些文件需要参与编译，可以使用通配符匹配多个文件。
• exclude：指定哪些文件不参与编译，可以使用通配符排除多个文件。

一个完整的例子是，在使用Vue.js时，可以手动编写声明文件来为其添加类型定义。

1. 创建一个名为vue.d.ts的文件，内容如下：

declare module 'vue' {
  import Vue from 'vue';

  export default Vue;
}

2. 在tsconfig.json中，添加以下配置：

{
  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
}

3. 将vue.d.ts放置在./typings文件夹下。

这样，在使用import Vue from 'vue'时，TypeScript就会使用手动编写的声明文件来解析类型。

通过手动编写声明文件，可以为第三方库或模块添加类型定义，提升代码的可读性和维护性。