TypeScript 聲明文件全解析
導(dǎo)語：全面擁抱 TS 的時代，TS 已經(jīng)成為日常開發(fā)中的重要部分。本文主要介紹 TS 聲明文件的寫法。
聲明文件的定義
通俗地來講，在 TypeScript 中以 .d.ts 為后綴的文件，我們稱之為 TypeScript 聲明文件。它的主要作用是描述 JavaScript 模塊內(nèi)所有導(dǎo)出接口的類型信息。
什么時候需要寫 TS 聲明文件
在日常的開發(fā)中，絕大多數(shù)時候是不需要我們單獨(dú)去編寫一個 TS 聲明文件的。如果我們的文件本身是用 TS 編寫的，在編譯的時候讓 TS 自動生成聲明文件，并在發(fā)布的時候?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é)了以下三種情況，需要我們手動定義聲明文件：
通過 script 標(biāo)簽引入的第三方庫
一些通過 CDN 的當(dāng)時映入的小的工具包，掛載了一些全局的方法，如果在 TS 中直接使用的話，會報 TS 語法錯誤，這時候就需要我們對這些全局的方法進(jìn)行 TS 聲明。
使用的第三方 npm 包，但是沒有提供聲明文件
第三方 npm 包如果有提供聲明文件的話，一般會以兩種形式存在：一是 @types/xxx，另外是在源代碼中提供 .d.ts 聲明文件。第一種的話一般是一些使用量比較高的庫會提供，可以通過 npm i @type/xxx 嘗試安裝。如果這兩種都不存在的話，那就需要我們自己來定義了。
自身團(tuán)隊(duì)內(nèi)比較優(yōu)秀的 JS 庫或插件，為了提升開發(fā)體驗(yàn)
如何編寫 TS 聲明文件
對于不同形式的聲明文件，寫法上會有一定的差異。這里需要特別注意一點(diǎn)的是：聲明文件中只是對類型的定義，不能進(jìn)行賦值。
?? 全局變量
全局變量的聲明文件主要有以下幾種語法：
declare let/const // 聲明全局變量
declare function // 聲明全局方法
declare class // 聲明全局類
declare enum // 聲明全局枚舉類型
declare namespace // 聲明（含有子屬性的）全局對象
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 包
對于沒有提供聲明文件的 npm 包，我們可以創(chuàng)建一個 types 目錄，來管理自己寫的聲明文件，同時需要在配置文件 tsconfig.json 中的 paths 和 basrUrl 中配置：
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "./", // types文件夾的相對路徑
"paths": { "*": ["types/*"]}
}
}
npm 包的聲明文件主要有以下幾種語法：
export const/let // 導(dǎo)出變量
export namespace // 導(dǎo)出（含有自屬性的）對象
export default // ES6 默認(rèn)導(dǎo)出
export = // commonjs 導(dǎo)出模塊
?? 拓展原有模塊/全局變量
對于已經(jīng)有聲明定義的模塊或者全局變量，可以利用 TS 中的聲明合并對其進(jìn)行拓展。
比如在 window 下掛載的一些全局變量:
interface Window {
readonly request?: any;
readonly devToolsExtension?: any;
readonly wx?: any;
}
對已有模塊進(jìn)行拓展：
declare module "querystring" {
function escape(str: string): string;
function unescape(str: string): string;
}
還可以使用三斜線的方式對聲明文件進(jìn)行引用：
/// <reference path=”custom.d.ts" />最后
如何讓 TS 在編譯時自動生成 .d.ts 文件呢？只需要在 tsconfig.json 配置文件中開啟即可，TS 編譯時就會自動生成 .d.ts 聲明文件：
{
"compilerOptions": {
"declaration": true
}
}
參考
愛心三連擊
1.看到這里了就點(diǎn)個在看支持下吧，你的在看是我創(chuàng)作的動力。
2.關(guān)注公眾號腦洞前端，獲取更多前端硬核文章！加個星標(biāo)，不錯過每一條成長的機(jī)會。
3.如果你覺得本文的內(nèi)容對你有幫助，就幫我轉(zhuǎn)發(fā)一下吧。