[[418172]]

本文轉載自微信公眾號「神光的編程秘籍」，作者神說要有光。轉載本文請聯系神光的編程秘籍公眾號。

類型

類型指的是變量的類型，而變量是一塊內存空間，不同類型的變量會占用不同的字節數，而且可以做的操作也不同。number、boolean、string 等類型的變量會占用不同的內存大小。

類型分為基礎類型和引用類型，基礎類型分配在棧上，而引用類型分配在堆上，之所以有引用類型是因為這種類型是復合出來的，比如對象，它可能有任意多個屬性，這種就放在可動態分配內存的堆上，然后在棧上記錄下該地址，這就是引用類型。

類型是運行時的變量的內存空間大小和可以做的操作的標識，但是代碼中不一定包含，根據代碼中是否有類型的標識，語言分為了靜態類型語言和動態類型語言。

靜態類型、動態類型、類型安全

動態類型語言的代碼中沒有記錄變量的類型，對什么變量賦什么值做什么操作都是可以的，這樣寫代碼時不用考慮類型的問題，比較簡單，但是也有隱患，就是運行時變量賦值時發現類型不一致，或者調用了沒有的方法等，這是動態類型語言的缺點。

靜態類型語言則是把類型的標識保存在了代碼里，也就是有靜態類型系統。聲明的變量的類型在運行時會分配相應的內存空間，就會賦相同類型的值，就會調用該類型有的方法，如果不是，在編譯時就能檢查出來。

這種同樣類型的變量只賦值同類型的值，只做該類型允許的操作就叫做類型安全，顯然，動態類型是類型不安全的，會在運行時有各種類型相關問題，而靜態類型則通過類型系統在編譯期間就把類型不安全的操作檢查了出來進行報錯，所以是類型安全的。

typescript 就是給動態類型的 javascript 添加了一套靜態類型系統，是 javascript 的超集。

靜態類型系統的 3 個層次

其實靜態類型系統分為 3 個層次：

純靜態的類型系統

第一種就是純靜態的類型系統，變量的類型都是定義時聲明的，但有一個問題就是遇到參數的類型可能是多種類型的時候會比較麻煩。一些古老的語言是這種。

比如：

int add(int a, int b) { 
    return a + b; 
} 
double add(double a, double b) { 
    return a + b; 
} 

帶泛型的靜態類型系統

第二種是帶泛型的靜態類型系統，泛型也叫類型參數，具體的類型可以通過泛型參數來動態確定，多了一定的靈活性。java 是這種。

比如：

T add<T>(T a, T b) { 
    return a + b; 
} 

支持高級類型的靜態類型系統

第三種是支持高級類型的靜態類型系統，高級類型就是生成類型的類型，它除了可以傳泛型參數外還可以支持分支、遞歸、取屬性等操作，可以通過復雜的邏輯來生成類型。typescript 是這種。

比如下面的高級類型：

type RepeatN<Item, N extends number, Tuple extends any[] = []> = Tuple['length'] extends N ? Tuple : RepeatN<Item, N, [...Tuple, Item]>; 

它的作用是當傳入泛型參數時，返回該參數重復 n 次的元組：

type res = RepeactN<'a', 3>; 
// res 為 ['a', 'a', 'a'] 

高級類型支持類型編程，甚至是圖靈完備的，圖靈完備的意思就是說提供的語言特性可以描述所有可計算的邏輯。也就是所有用 javascript 寫的邏輯在 typescript 中用類型都可以實現，只不過具體語法有不同。

高級類型示例

就拿上面這個把參數重復 n 次的代碼來說，如果用 javascript 我們會這樣寫：

function repeactN(item, n) { 
    const res = []; 
    for (let i = 0; i< n; i++) { 
        res[i] = item; 
    } 
    return res; 
} 

用 typescript 的類型系統怎么寫呢?

圖靈完備意味著兩者都能實現同樣的邏輯，只不過實現方式不同。我們只要把邏輯想清楚，然后用類型支持的語法實現即可。

首先，函數參數在 ts 類型里就是泛型參數，變量在 ts 類型里也用泛型參數來存儲，循環在 ts 類型利用遞歸來實現，所以就是這樣的：

首先定義類型，Item 是重復的目標， n 是個數，然后第三個參數 Tuple 用來存儲結果

type RepeatN<Item, N extends number, Tuple extends any[] = []> 

然后具體的實現就是要不斷的往 Tuple 里放 Item，遞歸構造 

RepeatN<Item, N, [...Tuple, Item]> 

直到 Tuple 的 length 到了 N

Tuple['length'] extends N ? Tuple : RepeatN<Item, N, [...Tuple, Item]>; 

所以，完整的類型就是這樣的：

type RepeatN<Item, N extends number, Tuple extends any[] = []> = Tuple['length'] extends N ? Tuple : RepeatN<Item, N, [...Tuple, Item]>; 

通過這個高級類型我們可以感受到，typescript 的靜態類型系統就是第三種，可以支持類型編程，可以實現各種復雜邏輯，最終生成目標類型。

tyepscript 類型系統復雜度的原因

為什么 tyepscript 要設計這么復雜的類型系統呢?

靜態類型的目的就是把運行時的行為在編譯時就檢查出來，那么就要在編譯期間就要確定最終類型，而 javascript 邏輯又很靈活，所以想還沒運行就確定類型就需要各種類型的推導來生成最終類型，所以也就設計出了帶高級類型的靜態類型系統。

tyepscript 靜態類型系統的復雜度主要是因為 javascript 比較靈活導致的，是不可避免的。

總結

類型本質上是運行時變量的內存大小和可對它進行的操作，變量只賦值同類型的值就是類型安全，動態類型在源碼中沒有類型信息，沒法保證類型安全，而靜態類型則是在源碼中有類型信息，可以在編譯期間檢查出類型的錯誤，保證類型安全。

javascript 就是動態類型語言，雖然寫代碼比較簡單，但是運行時很容易出類型安全問題，typescript 就是解決了 javascript 沒有靜態類型系統的問題而做的擴展。ts 的類型系統是支持泛型、支持高級類型的靜態類型系統，而且類型的語法是圖靈完備的，也就是各種邏輯都可以表達，只不過和 js 中的語法會有不同。這也是 ts 給 js 擴展的這套類型系統中最復雜的部分，被大家戲稱為類型體操，但是這種復雜度是為了讓 javascript 變得類型安全不可避免的。 

其實高級類型的所謂類型體操也沒有那么難，只要想清楚要表達的邏輯，然后一步步用相應的語法實現即可，只不過語法會有一些別扭，比如變量用泛型參數實現、循環用遞歸實現等，但只要理清邏輯，實現起來還是不難的。