TypeScript 是帶有類型語法的 JavaScript，它是一種建立在 JavaScript 基礎上的強類型編程語言。它內置了常見的基礎類型，比如 string、number 和 boolean 等類型。

在這些類型的基礎上，我們就可以在聲明變量時，顯式聲明變量的類型。

let name: string = "阿寶哥"

那么在 TypeScript 中，類型到底是什么呢?其實你可以把類型理解成一系列值的集合。比如，你可以把數字類型看作是所有數字的集合，1.0、68 就屬于這個集合中，而 “阿寶哥” 就不屬于這個集合，因為它屬于字符串類型。

對于集合來說，最小的集合是空集，它不包含任何值。在 TypeScript 中與之對應的類型是 never 類型。因為它的域是空的，所以沒有值可以賦給 never 類型的變量：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在使用標稱類型系統的語言中，比如 Java、C++。通常會使用 class 來描述對象類型，Vector1D 類會被稱為父類，Vector2D 類被稱為子類。

然而 TypeScript 為了更好地與使用鴨子類型的 JavaScript 相兼容，采用了結構化類型系統。在該類型系統中 Vector1D 被稱為 SuperType，而 Vector2D 被稱為 SubType。

這種關系通常被畫成一個層次結構，但從集合的角度考慮，用文氏圖更合適。

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

這里 3 種類型之間關系對應的文氏圖是這樣的。

現在我們來做個總結，相比父類型 Vector1D，子類型 Vector2D 會包含更多的屬性，即描述的對象更為精確。Vector2D 子類型對應的集合包含于 Vector1D 父類型對應的集合中。

學完這些有什么用呢?讓我們來看個例子：

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 中的類型和所采用的結構化類型系統是 TS 進階的關鍵，值得你好好學習一番。如果有遇到不清楚的地方，歡迎隨時跟阿寶哥交流。你喜歡以這種形式學 TS 么?