一、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。
编写声明文件的方法有三种：
- 全局声明：通过
declare关键字，直接声明全局变量、函数或命名空间。
例如，对于全局变量$和全局函数myFunction，可以这样编写声明文件：
declare const $: JQueryStatic;
declare function myFunction(a: number, b: number): number;
- 模块声明：通过
declare module关键字，为模块添加类型定义。
例如，对于模块myModule，可以这样编写声明文件：
declare module 'myModule' {
export function myFunction(): void;
export const myVariable: number;
}
- 扩展声明：通过声明全局的模块依赖，为已有模块添加类型定义。
例如，自动化构建工具gulp没有官方的类型声明文件，可以通过扩展声明为其添加类型定义：
declare module 'gulp' {
function task(name: string, cb: () => void): void;
export = task;
}
当引入第三方库或模块时，TypeScript会按以下顺序查找声明文件：
-
先查找默认位置：TypeScript会在和引入的模块相同的文件夹下寻找名为
index.d.ts的声明文件。 -
遍历
node_modules：TypeScript会从当前文件所在的目录开始，逐级向上遍历父级目录中的node_modules文件夹，按照引入模块的路径寻找相应的声明文件。 -
与声明文件同名的 JavaScript 文件：如果找不到声明文件，TypeScript会查找与引入模块文件同名的 JavaScript 文件，并尝试解析其中的类型。
在tsconfig.json中，可以配置以下选项来辅助声明文件的编译：
typeRoots：指定额外的类型声明文件的搜索位置，通常用于指定全局声明文件的位置。include：指定哪些文件需要参与编译，可以使用通配符匹配多个文件。exclude：指定哪些文件不参与编译，可以使用通配符排除多个文件。
一个完整的例子是，在使用Vue.js时，可以手动编写声明文件来为其添加类型定义。
- 创建一个名为
vue.d.ts的文件，内容如下：
declare module 'vue' {
import Vue from 'vue';
export default Vue;
}
- 在
tsconfig.json中，添加以下配置：
{
"compilerOptions": {
"typeRoots": ["./typings"]
}
}
- 将
vue.d.ts放置在./typings文件夹下。
这样，在使用import Vue from 'vue'时，TypeScript就会使用手动编写的声明文件来解析类型。
通过手动编写声明文件，可以为第三方库或模块添加类型定义，提升代码的可读性和维护性。
