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

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

let name: string = "阿寶哥"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其實(shí)對于上面的 3 種類型來說，我們也可以通過 extends 來擴(kuò)展已有的接口類型：

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

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

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

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

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

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

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

學(xué)完這些有什么用呢?讓我們來看個(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 中的類型和所采用的結(jié)構(gòu)化類型系統(tǒng)是 TS 進(jìn)階的關(guān)鍵，值得你好好學(xué)習(xí)一番。如果有遇到不清楚的地方，歡迎隨時(shí)跟阿寶哥交流。你喜歡以這種形式學(xué) TS 么?