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