聲明文件的定義
通俗地來講，在 TypeScript 中以 .d.ts 為后綴的文件，我們稱之為 TypeScript 聲明文件。它的主要作用是描述 JavaScript 模塊內所有導出接口的類型信息。
什么時候需要寫 TS 聲明文件
在日常的開發中，絕大多數時候是不需要我們單獨去編寫一個 TS 聲明文件的。如果我們的文件本身是用 TS 編寫的，在編譯的時候讓 TS 自動生成聲明文件，並在發布的時候將 .d.ts 文件一起發布即可。
總結了以下三種情況，需要我們手動定義聲明文件：
通過 script 標簽引入的第三方庫
一些通過 CDN 的當時映入的小的工具包，掛載了一些全局的方法，如果在 TS 中直接使用的話，會報 TS 語法錯誤，這時候就需要我們對這些全局的方法進行 TS 聲明。
使用的第三方 npm 包，但是沒有提供聲明文件
第三方 npm 包如果有提供聲明文件的話，一般會以兩種形式存在：一是 @types/xxx ，另外是在源代碼中提供 .d.ts 聲明文件。第一種的話一般是一些使用量比較高的庫會提供，可以通過 npm i @type/xxx 嘗試安裝。如果這兩種都不存在的話，那就需要我們自己來定義了。
自身團隊內比較優秀的 js 庫或插件，為了提升開發體驗
https://www.98891.com/article-60-1.html
如何編寫 TS 聲明文件
對於不同形式的聲明文件，寫法上會有一定的差異。這里需要特別注意一點的是：聲明文件中只是對類型的定義，不能進行 賦值 。
:pushpin: 全局變量
全局變量的聲明文件主要有以下幾種語法：
declare let/const // 聲明全局變量
declare function // 聲明全局方法
declare class // 聲明全局類
declare enum // 聲明全局枚舉類型
declare namespace // 聲明（含有子屬性的）全局對象
interface/type // 聲明全局類型
這里需要注意的是只是定義類型，不能進行 賦值 。
// 變量
declare let userName: string;
declare const wx: any;
// 函數、函數重載
declare function getName(uid: number): string;
declare function getName(): string;
declare function getName(cb: () => any): any;
// 類
declare class Course {
cid: number;
constructor(cid){};
getCoursePrice(): number;
}
// 枚舉
declare enum Status {
Loading,
Success,
Failed,
}
// 接口 interface declare 可以不需要
interface CourseInfo {
cid: number;
name: string;
}
interface CGIData<T> {
data: T;
retcode: 0;
}
// 命名空間
declare namespace User {
// 局部 Test.User
interface User {
name: string;
age: number;
}
function getUserInfo(name: string): User {
return "";
}
namespace fn {
function extend(obj: any): any;
}
}
// 聲明合並
declare function User(id: number): string;:pushpin: npm 包
對於沒有提供聲明文件的 npm 包，我們可以創建一個 types 目錄，來管理自己寫的聲明文件，同時需要在配置文件 tsconfig.json 中的 paths 和 basrUrl 中配置：
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "./", // types文件夾的相對路徑
"paths": { "*": ["types/*"]}
}
}
npm 包的聲明文件主要有以下幾種語法：
export const/let // 導出變量
export namespace // 導出（含有自屬性的）對象
export default // ES6 默認導出
export = // commonjs 導出模塊
:pushpin: 拓展原有模塊/全局變量
對於已經有聲明定義的模塊或者全局變量，可以利用 TS 中的聲明合並對其進行拓展。
比如在 window 下掛載的一些全局變量:
interface Window {
readonly request?: any;
readonly devToolsExtension?: any;
readonly wx?: any;
}
對已有模塊進行拓展：
declare module "querystring" {
function escape(str: string): string;
function unescape(str: string): string;
}
還可以使用三斜線的方式對聲明文件進行引用：
/// <reference path=”custom.d.ts" />
最后
如何讓 TS 在編譯時自動生成 .d.ts 文件呢？只需要在 tsconfig.json 配置文件中開啟即可，TS 編譯時就會自動生成 .d.ts 聲明文件：
{
"compilerOptions": {
"declaration": true
}
}