簡(jiǎn)介這是一份面向前端開(kāi)發(fā)者及TypeScript初學(xué)者的PDF教程以數(shù)據(jù)類型為主線系統(tǒng)梳理類型系統(tǒng)的核心概念適合用于快速入門(mén)、查漏補(bǔ)缺或作為課程配套資料。資源僅包含1個(gè)PDF文檔壓縮包大小約1.75MB小而精便于下載后隨時(shí)隨地學(xué)習(xí)。目前該資料已有1099人學(xué)習(xí)內(nèi)容覆蓋基礎(chǔ)數(shù)據(jù)類型、枚舉、接口、類等知識(shí)點(diǎn)。教程從布爾值、數(shù)字、字符串、數(shù)組、元組等基礎(chǔ)類型講起再深入到外部枚舉、接口的可選屬性、函數(shù)類型、數(shù)組類型、類類型與實(shí)現(xiàn)接口并配有大量可直接運(yùn)行的代碼示例。此外還涉及類靜態(tài)部分與實(shí)例部分的區(qū)別、擴(kuò)展接口、混合類型、接口繼承類等進(jìn)階主題章節(jié)安排循序漸進(jìn)目錄與導(dǎo)航清晰方便讀者按需查閱。完整學(xué)完后讀者能夠理解類型注解、接口約束與類結(jié)構(gòu)的配合方式從而在實(shí)際項(xiàng)目中寫(xiě)出更健壯、可維護(hù)的TypeScript代碼。1. TypeScript 教程資源從類型語(yǔ)法到工程習(xí)慣的進(jìn)階路線TypeScript 教程網(wǎng)上多到看不完但多數(shù)人卡住的位置不是語(yǔ)法本身而是接口、泛型、模塊組織這些看著能懂、一寫(xiě)就錯(cuò)的部分。這份教程資源的目錄編排順序很對(duì)我的胃口先基礎(chǔ)數(shù)據(jù)類型再接口、類和函數(shù)接著泛型與類型推導(dǎo)最后落到命名空間與模塊末尾還專門(mén)寫(xiě)了類型兼容性和 .d.ts 定義文件的編寫(xiě)。它不是一張速查表而是一條從會(huì)寫(xiě)注解到能設(shè)計(jì)類型的完整路線。適合已經(jīng)寫(xiě)過(guò)一些 TS 但總在編譯報(bào)錯(cuò)里打轉(zhuǎn)的前端開(kāi)發(fā)者也適合想系統(tǒng)梳理類型知識(shí)的中級(jí)工程師照著過(guò)一遍把零散經(jīng)驗(yàn)串成體系。2. 把類型基礎(chǔ)打牢基礎(chǔ)數(shù)據(jù)類型、接口與類的實(shí)戰(zhàn)邊界2.1 基礎(chǔ)數(shù)據(jù)類型boolean、number、string、array 與 tuple 的邊界教程開(kāi)篇用很小的篇幅把基礎(chǔ)類型過(guò)了一遍這幾行代碼看起來(lái)簡(jiǎn)單但里面藏著不少邊界。let isDone: boolean false; let decLiteral: number 6; let hexLiteral: number 0xf00d; let binaryLiteral: number 0b1010; let octalLiteral: number 0o744; let myName: string Tom; let myAge: string 25;所有數(shù)值統(tǒng)一用number表示不區(qū)分整型和浮點(diǎn)型這是 TypeScript 和 Java 系語(yǔ)言最明顯的差異也是很多后端轉(zhuǎn)前端的同事第一周最容易不習(xí)慣的地方。寫(xiě)進(jìn)制字面量時(shí)要注意0b和0o這類寫(xiě)法在舊版 ES target 下需要編譯器轉(zhuǎn)譯如果項(xiàng)目里 tsconfig 的 target 設(shè)成 ES3 或很老的版本編譯產(chǎn)物會(huì)變長(zhǎng)極端情況下還會(huì)出現(xiàn)兼容問(wèn)題。字符串的單雙引號(hào)完全等價(jià)重點(diǎn)不在于用哪種而在于團(tuán)隊(duì) lint 規(guī)則統(tǒng)一成一種。數(shù)組有兩種寫(xiě)法語(yǔ)義是等價(jià)的。let list1: number[] [1, 2, 3]; let list2: Arraynumber [1, 2, 3];泛型形式Arraynumber在函數(shù)簽名里更常用因?yàn)樗梢苑奖愕亟M合出更復(fù)雜的類型比如Arraystring | number。而number[]寫(xiě)法更直觀日常聲明局部變量時(shí)我一般用方括號(hào)形式。兩種寫(xiě)法在類型層面沒(méi)有任何區(qū)別不需要糾結(jié)但同一個(gè)文件里最好保持一致。元組是初學(xué)者最早遇到的坑之一。let x: [string, number]; x [hello, 10]; // OK x [10, hello]; // Error元組聲明了固定長(zhǎng)度和固定位置類型但實(shí)際運(yùn)行時(shí)數(shù)組的長(zhǎng)度約束比想象中弱。在后面避坑章節(jié)我會(huì)專門(mén)展開(kāi)這里先記住一個(gè)結(jié)論元組只保證前幾個(gè)位置的類型不保證越界訪問(wèn)的行為業(yè)務(wù)代碼里能用對(duì)象就別用長(zhǎng)元組。枚舉這塊教程里同時(shí)講了普通枚舉和外部枚舉。enum Color {Red, Green, Blue} let c: Color Color.Green;數(shù)字枚舉編譯后會(huì)生成反向映射Color[0]能拿到Red字符串枚舉則沒(méi)有這個(gè)反向映射這是兩者行為上最核心的差異。外部枚舉用declare enum聲明只描述類型不生成實(shí)現(xiàn)代碼適合對(duì)接已有的 JavaScript 全局變量。寫(xiě)外部枚舉時(shí)要注意它和運(yùn)行時(shí)真實(shí)對(duì)象一旦不一致類型層面完全看不出來(lái)屬于典型的編譯過(guò)了但跑起來(lái)才知道的坑。2.2 接口對(duì)象契約、函數(shù)形狀與類實(shí)現(xiàn)接口是這份教程里篇幅最長(zhǎng)、例子最多的部分因?yàn)樗?TypeScript 類型系統(tǒng)的骨架。interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); }接口是結(jié)構(gòu)化類型只要形狀匹配就能通過(guò)不要求對(duì)象顯式implements。這是 TypeScript 和 Java 最大的思維差異。一個(gè)對(duì)象哪怕聲明時(shí)根本沒(méi)提接口只要它有l(wèi)abel: string就能傳給這個(gè)函數(shù)。這個(gè)設(shè)計(jì)讓 TypeScript 能輕松對(duì)接無(wú)類型的歷史代碼但也意味著你要接受一種沒(méi)寫(xiě)契約但契約存在的狀態(tài)。可選屬性用?標(biāo)記這是接口最常見(jiàn)的形態(tài)之一。interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare {color: white, area: 100}; if (config.color) { newSquare.color config.color; } if (config.width) { newSquare.area config.width * config.width; } return newSquare; }可選屬性配合--strictNullChecks開(kāi)啟后config.color的類型是string | undefined你必須先判斷再使用。教程里這段代碼寫(xiě)得比較保守現(xiàn)實(shí)中我一般會(huì)直接用config.color ?? white這種默認(rèn)值寫(xiě)法代碼更短也不用擔(dān)心漏掉判斷分支。函數(shù)類型接口專門(mén)用來(lái)描述函數(shù)的形狀它把函數(shù)當(dāng)成對(duì)象來(lái)做約束。interface SearchFunc { (source: string, subString: string): boolean; }這種接口特別適合回調(diào)、事件處理器和策略模式。和直接寫(xiě)(source: string, subString: string) boolean相比接口形式的優(yōu)勢(shì)是可以被擴(kuò)展、被合并在復(fù)雜類型體系里更好維護(hù)。類類型接口和擴(kuò)展接口是另一個(gè)重點(diǎn)。interface ClockInterface { currentTime: Date; } class Clock implements ClockInterface { currentTime: Date new Date(); }這里有個(gè)經(jīng)典限制接口只能約束類的實(shí)例部分不能約束構(gòu)造函數(shù)本身。教程里專門(mén)講了類靜態(tài)部分與實(shí)例部分的區(qū)別意圖就在這里。構(gòu)造函數(shù)是靜態(tài)側(cè)的成員implements管不到它。如果你想讓某個(gè)工廠函數(shù)接受能 new 出特定形狀的類得把new簽名寫(xiě)在一個(gè)獨(dú)立接口上而不是期望類去implements它。這個(gè)點(diǎn)很容易繞暈記住一句話implements管實(shí)例new簽名管構(gòu)造。2.3 類的訪問(wèn)控制public、private、protected 與參數(shù)屬性類這一章教程從基礎(chǔ)的訪問(wèn)修飾符講起一直延伸到抽象類。class Animal { public name: string; private age: number; protected sex: string; constructor(name: string, age: number) { this.name name; this.age age; } }public是默認(rèn)值private只允許本類內(nèi)部訪問(wèn)protected允許子類訪問(wèn)。這套訪問(wèn)控制在編譯期是嚴(yán)格的但要注意它只存在于類型系統(tǒng)里編譯成 JavaScript 后就什么保護(hù)都沒(méi)有了運(yùn)行時(shí)任何人都能訪問(wèn)。如果你需要運(yùn)行時(shí)層面的真正私有得用 ES2022 的#私有字段。參數(shù)屬性是 TypeScript 提供的語(yǔ)法糖把聲明和賦值壓縮進(jìn)構(gòu)造函數(shù)參數(shù)。class Animal { constructor(private name: string, protected age: number) {} }這種寫(xiě)法代碼量少但閱讀門(mén)檻偏高。新人看到constructor(private name: string)不一定能立刻反應(yīng)過(guò)來(lái)這里隱式創(chuàng)建了同名字段。我的習(xí)慣是業(yè)務(wù)類隨便用公共基類和工具類盡量寫(xiě)顯式字段減少團(tuán)隊(duì)理解成本。存取器和靜態(tài)屬性也在這章有一個(gè)高頻坑值得提前說(shuō)。class Employee { private _fullName: string ; get fullName(): string { return this._fullName; } set fullName(name: string) { this._fullName name; } static company: string 某公司; }getter/setter 編譯到 ES5 時(shí)會(huì)生成Object.defineProperty屬性和 getter 不能撞名否則會(huì)無(wú)限遞歸觸發(fā) getter 導(dǎo)致棧溢出。教程里用_fullName加下劃線就是這個(gè)原因不是為了好看。2.4 抽象類與繼承什么時(shí)候該抽基類抽象類在教程里排在類這一章的后半段但它其實(shí)是設(shè)計(jì)層面的內(nèi)容。abstract class Animal { abstract makeSound(): void; move(): void { console.log(moving); } } class Dog extends Animal { makeSound(): void { console.log(bark); } }抽象類不能被實(shí)例化抽象方法必須在子類實(shí)現(xiàn)普通方法可以繼承默認(rèn)行為。它和接口的分工很清晰接口定義有什么抽象類定義是什么以及默認(rèn)怎么做。實(shí)際項(xiàng)目里抽象類適合做那些需要共享狀態(tài)和方法的基類比如組件基類、服務(wù)基類如果只是約束形狀接口足夠不需要抽象類的重量。教程在這一章還提了一個(gè)進(jìn)階技巧把類當(dāng)作接口使用。類定義本身會(huì)生成兩個(gè)東西一個(gè)是實(shí)例類型一個(gè)是構(gòu)造函數(shù)值。當(dāng)你把類當(dāng)接口用時(shí)類中的private或protected成員會(huì)參與結(jié)構(gòu)匹配兩個(gè)類就算形狀一樣只要私有成員來(lái)源不同類型就不兼容。這個(gè)規(guī)則在后面的類型兼容性章節(jié)還會(huì)再遇到但要先在這個(gè)地方留下印象。3. 函數(shù)、泛型與類型推導(dǎo)用類型約束邏輯3.1 函數(shù)類型與重載完整函數(shù)類型寫(xiě)法函數(shù)這一章教程先講如何給函數(shù)定義類型再講完整函數(shù)類型的寫(xiě)法。let myAdd: (x: number, y: number) number function(x: number, y: number): number { return x y; };左邊是函數(shù)類型變量聲明右邊是具體實(shí)現(xiàn)。這里有個(gè)細(xì)節(jié)實(shí)現(xiàn)函數(shù)的參數(shù)名可以跟類型簽名里的參數(shù)名不一致只要位置和類型匹配就行。類型系統(tǒng)檢查的是形狀不是名字。返回值類型寫(xiě)在箭頭后面如果實(shí)現(xiàn)里返回了非 number 類型編譯器會(huì)立即報(bào)錯(cuò)。重載是函數(shù)章節(jié)里含金量最高的部分。function pickCard(x: {suit: string; card: number}[]): number; function pickCard(x: number): {suit: string; card: number}; function pickCard(x: any): any { return typeof x number ? {suit: spade, card: x} : x[0]; }重載列表從上到下依次匹配越具體的簽名放越前面最后一個(gè)實(shí)現(xiàn)簽名不會(huì)暴露給調(diào)用方。新手最常見(jiàn)的錯(cuò)誤是把a(bǔ)ny版本放在最上面導(dǎo)致所有調(diào)用都走any分支類型保護(hù)形同虛設(shè)。這是典型的看著能跑、類型全丟的寫(xiě)法編輯器不會(huì)報(bào)錯(cuò)但寫(xiě)完了跟沒(méi)寫(xiě)一樣。3.2 可選參數(shù)、默認(rèn)參數(shù)與剩余參數(shù)function buildName(firstName: string, lastName?: string, age: number 18) { return firstName (lastName || ) age; }可選參數(shù)必須放在必選參數(shù)后面這是 TypeScript 的硬性規(guī)則。默認(rèn)參數(shù)表面上可以放在任意位置但調(diào)用時(shí)會(huì)有歧義比如buildName(Tom, undefined, 20)這種傳法可讀性很差。我的建議是默認(rèn)參數(shù)統(tǒng)一放最后不到萬(wàn)不得已別放中間。剩余參數(shù)處理不定數(shù)量的入?yún)?。function join(...parts: string[]): string { return parts.join(-); }剩余參數(shù)的類型必須是數(shù)組在 ES5 目標(biāo)下編譯后會(huì)生成arguments的循環(huán)拷貝參數(shù)數(shù)量大時(shí)會(huì)有可見(jiàn)的性能開(kāi)銷(xiāo)。這個(gè)一般不會(huì)成為瓶頸但如果你寫(xiě)的是一個(gè)會(huì)被高頻調(diào)用的工具函數(shù)可以考慮用普通參數(shù)數(shù)組替代剩余參數(shù)。3.3 泛型從 Hello World 到約束泛型是這份教程里最值得反復(fù)讀的部分因?yàn)樗菑募s束類型走向設(shè)計(jì)類型的分水嶺。function identityT(arg: T): T { return arg; }泛型的核心價(jià)值是保留類型關(guān)系輸入什么類型就返回什么類型。兩個(gè)常見(jiàn)誤用一是用any代替T返回值變成了any類型關(guān)系徹底丟失二是在泛型函數(shù)里直接訪問(wèn).length編譯器會(huì)報(bào)錯(cuò)因?yàn)榉盒筒恢绤?shù)具體形狀。正確的做法是用泛型約束。interface Lengthwise { length: number; } function loggingIdentityT extends Lengthwise(arg: T): T { console.log(arg.length); return arg; }T extends Lengthwise的意思是T 必須滿足 Lengthwise 結(jié)構(gòu)這樣函數(shù)體內(nèi)就可以安全訪問(wèn).length。教程后面還有一段在泛型約束中使用類型參數(shù)的例子這個(gè)是高頻考點(diǎn)。function getPropertyT, K extends keyof T(obj: T, key: K) { return obj[key]; }K extends keyof T約束了第二個(gè)參數(shù)必須是 T 的鍵之一調(diào)用時(shí)對(duì)象和鍵的對(duì)應(yīng)關(guān)系由編譯器保證。如果傳入一個(gè)對(duì)象上不存在的鍵編譯期直接報(bào)錯(cuò)而不是運(yùn)行時(shí)返回 undefined。這個(gè)模式在寫(xiě)表單映射、狀態(tài)管理的時(shí)候非常實(shí)用。泛型類也要注意一個(gè)硬限制。class GenericNumberT { zeroValue: T; add: (x: T, y: T) T; }泛型類只作用于實(shí)例側(cè)靜態(tài)成員不能使用類型參數(shù)。這是編譯器的明確限制想寫(xiě)靜態(tài)泛型方法只能把它挪到類外部的獨(dú)立函數(shù)里。3.4 類型推導(dǎo)與類型兼容性類型推導(dǎo)這章講的是不寫(xiě)類型時(shí) TypeScript 怎么猜。原則很簡(jiǎn)單能推導(dǎo)就不需要顯式標(biāo)注顯式標(biāo)注超過(guò)必要范圍會(huì)降低代碼可讀性。let x [0, 1, null]; // 在 strictNullChecks 下推導(dǎo)為 (number | null)[]最佳通用類型算法會(huì)從數(shù)組元素里找出所有候選類型然后計(jì)算一個(gè)兼容所有元素的聯(lián)合類型。上下文類型是反向推導(dǎo)左邊變量給右邊函數(shù)表達(dá)式提供了類型環(huán)境這時(shí)候?qū)崿F(xiàn)里的參數(shù)可以省略類型標(biāo)注。const handler: (e: MouseEvent) void e { console.log(e.clientX); };類型兼容性章節(jié)的核心是結(jié)構(gòu)子類型成員多的類型可以賦給成員少的類型。兩個(gè)函數(shù)比較時(shí)參數(shù)允許雙向協(xié)變不過(guò)開(kāi)啟strictFunctionTypes后函數(shù)類型參數(shù)的檢查會(huì)收緊只允許逆變。枚舉之間不兼容就算枚舉值一模一樣也不能互相賦值。類的私有成員必須同源才兼容這就是前面類那一章強(qiáng)調(diào)的規(guī)則在這里落地。4. 命名空間與模塊代碼組織與打包的取舍4.1 命名空間 vs 模塊選型標(biāo)準(zhǔn)教程里命名空間和模塊這一章反復(fù)強(qiáng)調(diào)一個(gè)觀點(diǎn)優(yōu)先使用模塊謹(jǐn)慎使用命名空間。這個(gè)結(jié)論要放在歷史背景下理解。命名空間是早期 TypeScript 用來(lái)組織全局代碼的方式它把變量掛在一個(gè)全局對(duì)象下靠限定名防止污染。模塊則是標(biāo)準(zhǔn)的文件作用域加顯式導(dǎo)入導(dǎo)出是現(xiàn)代工程里唯一合理的組織方式。選型標(biāo)準(zhǔn)很簡(jiǎn)單項(xiàng)目是現(xiàn)代化構(gòu)建流程比如 webpack、vite、ts-node一律用模塊寫(xiě)的是純?yōu)g覽器腳本沒(méi)有構(gòu)建步驟或者給全局變量庫(kù)寫(xiě)聲明才考慮命名空間。教程里那句對(duì)模塊使用 reference 是陷阱說(shuō)的就是把這兩種機(jī)制混在一起的情況。4.2 export 與 import 的推薦姿勢(shì)模塊章節(jié)把導(dǎo)出導(dǎo)入的語(yǔ)法形式都過(guò)了一遍這里整理成一張常用對(duì)照表。場(chǎng)景寫(xiě)法說(shuō)明導(dǎo)出聲明export interface Thing跟隨聲明直接導(dǎo)出導(dǎo)出語(yǔ)句export { thing }把已定義變量導(dǎo)出重導(dǎo)出export { thing as other } from ./x轉(zhuǎn)發(fā)并改名默認(rèn)導(dǎo)出export default function() {}單文件單入口導(dǎo)入單個(gè)import { thing } from ./x按需導(dǎo)入導(dǎo)入整體import * as m from ./x掛在命名空間對(duì)象上副作用導(dǎo)入import ./polyfill只執(zhí)行模塊代碼副作用導(dǎo)入要特別注意順序因?yàn)樗蝗∪魏谓壎兇鈭?zhí)行模塊內(nèi)部邏輯。如果模塊里有初始化代碼依賴另一個(gè)模塊而你把它排在前面運(yùn)行時(shí)可能拿到未初始化的狀態(tài)。這種問(wèn)題不會(huì)在編譯期暴露只能等運(yùn)行時(shí)崩。4.3 模塊結(jié)構(gòu)指導(dǎo)頂層導(dǎo)出優(yōu)先教程這段寫(xiě)得像工程規(guī)范每條都是實(shí)戰(zhàn)里沉淀出來(lái)的。盡可能在頂層導(dǎo)出避免嵌套導(dǎo)出。如果只導(dǎo)出一個(gè) class 或 function用export default。導(dǎo)出多個(gè)對(duì)象時(shí)全部放頂層導(dǎo)出。要導(dǎo)出大量?jī)?nèi)容時(shí)用命名空間導(dǎo)入模式接收。擴(kuò)展第三方模塊時(shí)用重新導(dǎo)出去包裝。這些規(guī)則的目的是讓導(dǎo)入方一眼看到 API 表面。嵌套導(dǎo)出會(huì)讓調(diào)用方寫(xiě)出ns1.ns2.ns3.foo()這種路徑編輯器提示都沒(méi)法用。我見(jiàn)過(guò)一個(gè)老項(xiàng)目把命名空間套了三層最后每個(gè)人導(dǎo)入的時(shí)候都要先翻一翻對(duì)象結(jié)構(gòu)可讀性代價(jià)非常大。4.4 模塊加載與命名空間混用的坑教程明確列了幾個(gè)陷阱值得單獨(dú)拎出來(lái)。對(duì)模塊使用/// reference是反模式reference 指令只適合全局腳本和聲明文件模塊之間應(yīng)該用 import 建立依賴關(guān)系。把 reference 用在模塊文件里編譯器雖然能識(shí)別但會(huì)把依賴關(guān)系搞亂構(gòu)建工具拿到的是物理路徑而不是模塊解析路徑打包順序容易出問(wèn)題。教程里不必要的命名空間這一節(jié)也很直接模塊文件里再包一層命名空間等于把已經(jīng)隔離的作用域又套了個(gè)殼純粹增加噪音。模塊本身就有作用域再包命名空間沒(méi)有任何額外收益只有查詢路徑變長(zhǎng)的成本。5. 避坑與排查T(mén)S 學(xué)習(xí)路上最常見(jiàn)的 5 個(gè)翻車(chē)現(xiàn)場(chǎng)5.1 元組越界訪問(wèn)類型上已失控運(yùn)行時(shí)靜默現(xiàn)象定義let x: [string, number] [hello, 10]后調(diào)用x.push(true)編譯器不報(bào)錯(cuò)訪問(wèn)x[3]也拿不到任何類型提示運(yùn)行時(shí)返回 undefined數(shù)據(jù)悄悄丟了一截。原因早期版本對(duì)元組的約束只覆蓋聲明過(guò)的索引位置越界操作走的是數(shù)組放寬邏輯類型檢查形同虛設(shè)。這個(gè)問(wèn)題在舊版編譯配置下非常隱蔽因?yàn)樗粓?bào)錯(cuò)。解決開(kāi)啟--noUncheckedIndexedAccess讓越界訪問(wèn)的類型變成undefined逼你先做判斷業(yè)務(wù)上優(yōu)先用對(duì)象結(jié)構(gòu)替代長(zhǎng)元組或者用readonly元組加as const固定數(shù)據(jù)。從那以后我寫(xiě)元組前都會(huì)先問(wèn)一句這里是不是其實(shí)應(yīng)該用對(duì)象。5.2 數(shù)字枚舉的反向映射刪掉的值還活著現(xiàn)象enum Color {Red, Green, Blue}里刪掉 Green代碼里沒(méi)報(bào)錯(cuò)但運(yùn)行時(shí)Color[1]依然返回Green或者打印枚舉對(duì)象時(shí)看到一堆反向鍵。原因數(shù)字枚舉編譯后生成正反雙向映射對(duì)象這是為了兼容舊代碼和反向查找場(chǎng)景。你刪了枚舉成員只要某個(gè)地方還引用了類型層面會(huì)報(bào)錯(cuò)但運(yùn)行時(shí)生成的對(duì)象是獨(dú)立于類型檢查的老的值可能還在。解決不需要反向映射就改用字符串枚舉或const enum。注意const enum在isolatedModules獨(dú)立編譯模式下有限制多人協(xié)作項(xiàng)目要提前在 tsconfig 里約定好避免某個(gè)人開(kāi)了獨(dú)立編譯后構(gòu)建炸掉。5.3 strictNullChecks 開(kāi)啟后的可選屬性連鎖反應(yīng)現(xiàn)象接口里寫(xiě)color?: string函數(shù)里const c: string config.color直接編譯報(bào)錯(cuò)。原因開(kāi)啟 strict 后可選屬性的類型是string | undefined必須做收窄才能賦給純string變量。解決用if (config.color)判斷或者用config.color ?? 默認(rèn)值提供兜底。更重要的教訓(xùn)是團(tuán)隊(duì)項(xiàng)目一開(kāi)始就開(kāi) strict不要等項(xiàng)目寫(xiě)到一半再開(kāi)。我見(jiàn)過(guò)一個(gè)中期項(xiàng)目打開(kāi) strict 后冒出幾百個(gè)編譯錯(cuò)誤全是這種可選屬性賦值問(wèn)題排查成本遠(yuǎn)超當(dāng)初節(jié)省的那點(diǎn)時(shí)間。5.4 private 只是編譯期約束運(yùn)行時(shí)一樣能訪問(wèn)現(xiàn)象類的private age字段在另一個(gè)類里用(obj as any).age輕松拿值。原因TypeScript 的private是類型系統(tǒng)層面的編譯到 JavaScript 后字段就是普通屬性as any直接繞過(guò)類型檢查運(yùn)行時(shí)沒(méi)有任何保護(hù)。解決需要運(yùn)行時(shí)真正私有用 ES2022 的#age私有字段TypeScript 3.8 開(kāi)始支持或者用 WeakMap 保存私有數(shù)據(jù)。如果只是在團(tuán)隊(duì)內(nèi)部防誤用_前綴加 lint 規(guī)則也能起到提醒作用但那個(gè)只防君子不防小人。5.5 命名空間與模塊混用export namespace 的怪味道現(xiàn)象在 .ts 文件里寫(xiě)export namespace Foo { export function bar() {} }導(dǎo)入時(shí)import { Foo } from ./foo能用但類型提示總是往深一層鉆編輯器自動(dòng)補(bǔ)全也不友好。原因模塊本身已經(jīng)有作用域命名空間又包了一層產(chǎn)生兩層查詢路徑。類型提示和導(dǎo)入方都要多走一步API 表面被無(wú)意義地加深。解決模塊內(nèi)部一律不用命名空間直接 export 函數(shù)和類型。命名空間只保留給全局 .d.ts 聲明文件和純腳本場(chǎng)景其余地方出現(xiàn)export namespace基本可以斷定是代碼組織出了問(wèn)題建議重構(gòu)成普通導(dǎo)出。6. 從教程到工程聲明合并、混入與 .d.ts 的進(jìn)階驗(yàn)證6.1 聲明合并與混入兩個(gè)低頻但關(guān)鍵的技巧聲明合并是教程里容易被跳過(guò)的章節(jié)但它是理解 .d.ts 聲明文件的基礎(chǔ)。同名接口會(huì)合并成員同名命名空間會(huì)合并導(dǎo)出命名空間還能和函數(shù)、類、枚舉合并。寫(xiě)全局聲明時(shí)經(jīng)常需要靠聲明合并給已有的函數(shù)掛額外屬性比如給一個(gè)函數(shù)類型同時(shí)加 .version 和 .defaultOptions。混入解決的是多繼承缺失的問(wèn)題。TypeScript 類只能單繼承但可以用展開(kāi)混入把多個(gè)類的方法合并到一個(gè)目標(biāo)類上。教程里那個(gè)例子核心是用Object.assign把多個(gè)原型上的方法拷貝過(guò)去再手動(dòng)聲明合并后的類型。實(shí)際項(xiàng)目里混入用得不算多但遇到橫切關(guān)注點(diǎn)比如日志、鑒權(quán)比嵌套繼承更干凈。6.2 用 .d.ts 定義文件檢驗(yàn)類型理解教程最后一章講編寫(xiě)定義文件這是對(duì)整份教程最好的收尾驗(yàn)證。一個(gè)合格的 .d.ts 要能描述參數(shù)對(duì)象、帶屬性的函數(shù)、既能 new 又能直接調(diào)用的方法、還有回調(diào)函數(shù)的形狀。寫(xiě)一遍 .d.ts基本就把接口、類型推導(dǎo)、聲明合并、模塊導(dǎo)出這些知識(shí)點(diǎn)全部串起來(lái)了。我的習(xí)慣做法是拿一個(gè)無(wú)類型的 JavaScript 工具庫(kù)試著給它寫(xiě)一份聲明文件再讓編譯器用--checkJs去驗(yàn)證。聲明文件能通過(guò)編譯才算真正把這份教程里的類型設(shè)計(jì)思路消化了。從那以后每次學(xué)完一份 TypeScript 資料我都會(huì)強(qiáng)制自己走一遍寫(xiě)聲明、補(bǔ)類型、跑檢查這個(gè)流程希望能幫到你。本文還有配套的精品資源點(diǎn)擊獲取