TypeScript 是帶有類(lèi)型語(yǔ)法的 JavaScript，它是一種建立在 JavaScript 基礎(chǔ)上的強(qiáng)類(lèi)型編程語(yǔ)言。它內(nèi)置了常見(jiàn)的基礎(chǔ)類(lèi)型，比如 string、number 和 boolean 等類(lèi)型。

在這些類(lèi)型的基礎(chǔ)上，我們就可以在聲明變量時(shí)，顯式聲明變量的類(lèi)型。

let name: string = "阿寶哥"

那么在 TypeScript 中，類(lèi)型到底是什么呢?其實(shí)你可以把類(lèi)型理解成一系列值的集合。比如，你可以把數(shù)字類(lèi)型看作是所有數(shù)字的集合，1.0、68 就屬于這個(gè)集合中，而 “阿寶哥” 就不屬于這個(gè)集合，因?yàn)樗鼘儆谧址?lèi)型。

對(duì)于集合來(lái)說(shuō)，最小的集合是空集，它不包含任何值。在 TypeScript 中與之對(duì)應(yīng)的類(lèi)型是 never 類(lèi)型。因?yàn)樗挠蚴强盏?，所以沒(méi)有值可以賦給 never 類(lèi)型的變量：

let num: never = 123; // Error
let name: never = "阿寶哥"; // Error

下一個(gè)最小的集合是包含單個(gè)值的集合。在 TypeScript 中與之對(duì)應(yīng)的類(lèi)型是字面量類(lèi)型，也稱(chēng)為單元類(lèi)型(Unit Type)。

type A = "A";
type B = "B";

let a: A = "A" // Ok
let b: B = "A" // Error

既然有單個(gè)值的集合，那么有兩個(gè)值的集合么?答案是有的，boolean 類(lèi)型就是含有 true 和 false 值的集合。

此外，我們也可以使用操作符 | 把字面量類(lèi)型組合成新的類(lèi)型，也被稱(chēng)為聯(lián)合類(lèi)型。如果你對(duì)聯(lián)合類(lèi)型還不了解的話(huà)，可以觀(guān)看 “搞懂 TypeScript 聯(lián)合類(lèi)型的多個(gè)知識(shí)點(diǎn)” 這一期的視頻。

type AB = 'A' | 'B'; 
let a: AB= 'A' // Ok
let c: AB = "C" // Error

除了有限集合之外，我們前面介紹的 string 和 number 類(lèi)型是屬于無(wú)限集合。此外，為了滿(mǎn)足不同的開(kāi)發(fā)需求，TypeScript 還允許我們自定義類(lèi)型。比如，這里使用 interface 關(guān)鍵字定義 3 種類(lèi)型。

interface Vector1D { x: number; }  
interface Vector2D { x: number; y: number; }  
interface Vector3D { x: number; y: number; z: number; }

其中 Vector1D 類(lèi)型表示含有 x 屬性且屬性值的類(lèi)型是 number 類(lèi)型對(duì)象的集合。而 Vector2D 類(lèi)型表示同時(shí)含有 x、y 屬性且屬性值的類(lèi)型都為 number 類(lèi)型對(duì)象的集合。

為了便于大家的理解，我們使用 JS 表達(dá)式來(lái)描述上述的規(guī)則：

v1 && typeof v1 === "object" && typeof v1.x === "number" // Vector1D
v2 && typeof v2 === "object" && typeof v2.x === "number" && typeof v2.y === "number" // Vector2D

其實(shí)對(duì)于上面的 3 種類(lèi)型來(lái)說(shuō)，我們也可以通過(guò) extends 來(lái)擴(kuò)展已有的接口類(lèi)型：

interface Vector1D { x: number; }
interface Vector2D extends Vector1D { y: number; } 
interface Vector3D extends Vector2D { z: number; }

在使用標(biāo)稱(chēng)類(lèi)型系統(tǒng)的語(yǔ)言中，比如 Java、C++。通常會(huì)使用 class 來(lái)描述對(duì)象類(lèi)型，Vector1D 類(lèi)會(huì)被稱(chēng)為父類(lèi)，Vector2D 類(lèi)被稱(chēng)為子類(lèi)。

然而 TypeScript 為了更好地與使用鴨子類(lèi)型的 JavaScript 相兼容，采用了結(jié)構(gòu)化類(lèi)型系統(tǒng)。在該類(lèi)型系統(tǒng)中 Vector1D 被稱(chēng)為 SuperType，而 Vector2D 被稱(chēng)為 SubType。

這種關(guān)系通常被畫(huà)成一個(gè)層次結(jié)構(gòu)，但從集合的角度考慮，用文氏圖更合適。

文氏圖是在所謂的集合論數(shù)學(xué)分支中，在不太嚴(yán)格的意義下用以表示集合的一種草圖。它們用于展示在不同的事物集合之間的數(shù)學(xué)或邏輯聯(lián)系，尤其適合用來(lái)表示集合之間的“大致關(guān)系”。

這里 3 種類(lèi)型之間關(guān)系對(duì)應(yīng)的文氏圖是這樣的。

現(xiàn)在我們來(lái)做個(gè)總結(jié)，相比父類(lèi)型 Vector1D，子類(lèi)型 Vector2D 會(huì)包含更多的屬性，即描述的對(duì)象更為精確。Vector2D 子類(lèi)型對(duì)應(yīng)的集合包含于 Vector1D 父類(lèi)型對(duì)應(yīng)的集合中。

學(xué)完這些有什么用呢?讓我們來(lái)看個(gè)例子：

interface Vector1D { x: number; }  
interface Vector2D { x: number; y: number; }  
type SubtypeOf<T,U> = T extends U ? true : false
type A = SubtypeOf<Vector2D, Vector1D> // true
type B = SubtypeOf<Vector1D, Vector1D> // true
type C = SubtypeOf<Vector1D, Vector2D> // false

了解 TS 中的類(lèi)型和所采用的結(jié)構(gòu)化類(lèi)型系統(tǒng)是 TS 進(jìn)階的關(guān)鍵，值得你好好學(xué)習(xí)一番。如果有遇到不清楚的地方，歡迎隨時(shí)跟阿寶哥交流。你喜歡以這種形式學(xué) TS 么?