哥，幫忙寫(xiě)個(gè)聲明文件唄
導(dǎo)語(yǔ)：全面擁抱 TS 的時(shí)代，TS 已經(jīng)成為日常開(kāi)發(fā)中的重要部分。本文主要介紹 TS 聲明文件的寫(xiě)法。
聲明文件的定義
通俗地來(lái)講，在 TypeScript 中以 .d.ts 為后綴的文件，我們稱之為 TypeScript 聲明文件。它的主要作用是描述 JavaScript 模塊內(nèi)所有導(dǎo)出接口的類型信息。
什么時(shí)候需要寫(xiě) TS 聲明文件
在日常的開(kāi)發(fā)中，絕大多數(shù)時(shí)候是不需要我們單獨(dú)去編寫(xiě)一個(gè) TS 聲明文件的。如果我們的文件本身是用 TS 編寫(xiě)的，在編譯的時(shí)候讓 TS 自動(dòng)生成聲明文件，并在發(fā)布的時(shí)候?qū)?span style="color: rgb(0, 0, 0);font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;text-align: left;background-color: rgb(255, 255, 255);"> .d.ts 文件一起發(fā)布即可。
總結(jié)了以下三種情況，需要我們手動(dòng)定義聲明文件：
通過(guò) script 標(biāo)簽引入的第三方庫(kù)
一些通過(guò) CDN 的當(dāng)時(shí)映入的小的工具包，掛載了一些全局的方法，如果在 TS 中直接使用的話，會(huì)報(bào) TS 語(yǔ)法錯(cuò)誤，這時(shí)候就需要我們對(duì)這些全局的方法進(jìn)行 TS 聲明。
使用的第三方 npm 包，但是沒(méi)有提供聲明文件
第三方 npm 包如果有提供聲明文件的話，一般會(huì)以兩種形式存在：一是 @types/xxx，另外是在源代碼中提供 .d.ts 聲明文件。第一種的話一般是一些使用量比較高的庫(kù)會(huì)提供，可以通過(guò) npm i @type/xxx 嘗試安裝。如果這兩種都不存在的話，那就需要我們自己來(lái)定義了。
自身團(tuán)隊(duì)內(nèi)比較優(yōu)秀的 JS 庫(kù)或插件，為了提升開(kāi)發(fā)體驗(yàn)
如何編寫(xiě) TS 聲明文件
對(duì)于不同形式的聲明文件，寫(xiě)法上會(huì)有一定的差異。這里需要特別注意一點(diǎn)的是：聲明文件中只是對(duì)類型的定義，不能進(jìn)行賦值。
?? 全局變量
全局變量的聲明文件主要有以下幾種語(yǔ)法：
declare let/const // 聲明全局變量
declare function // 聲明全局方法
declare class // 聲明全局類
declare enum // 聲明全局枚舉類型
declare namespace // 聲明（含有子屬性的）全局對(duì)象
interface/type // 聲明全局類型
這里需要注意的是只是定義類型，不能進(jìn)行賦值。
// 變量
declare let userName: string;
declare const wx: any;
// 函數(shù)、函數(shù)重載
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;?? npm 包
對(duì)于沒(méi)有提供聲明文件的 npm 包，我們可以創(chuàng)建一個(gè) types 目錄，來(lái)管理自己寫(xiě)的聲明文件，同時(shí)需要在配置文件 tsconfig.json 中的 paths 和 basrUrl 中配置：
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "./", // types文件夾的相對(duì)路徑
"paths": { "*": ["types/*"]}
}
}
npm 包的聲明文件主要有以下幾種語(yǔ)法：
export const/let // 導(dǎo)出變量
export namespace // 導(dǎo)出（含有自屬性的）對(duì)象
export default // ES6 默認(rèn)導(dǎo)出
export = // commonjs 導(dǎo)出模塊
?? 拓展原有模塊/全局變量
對(duì)于已經(jīng)有聲明定義的模塊或者全局變量，可以利用 TS 中的聲明合并對(duì)其進(jìn)行拓展。
比如在 window 下掛載的一些全局變量:
interface Window {
readonly request?: any;
readonly devToolsExtension?: any;
readonly wx?: any;
}
對(duì)已有模塊進(jìn)行拓展：
declare module "querystring" {
function escape(str: string): string;
function unescape(str: string): string;
}
還可以使用三斜線的方式對(duì)聲明文件進(jìn)行引用：
/// <reference path=”custom.d.ts" />最后
如何讓 TS 在編譯時(shí)自動(dòng)生成 .d.ts 文件呢？只需要在 tsconfig.json 配置文件中開(kāi)啟即可，TS 編譯時(shí)就會(huì)自動(dòng)生成 .d.ts 聲明文件：
{
"compilerOptions": {
"declaration": true
}
}
參考
