TypeScript 筆記 - 型別系統與基礎觀念

Type System (型別系統) 與 TypeScript

在討論到 TypeScript 是什麼之前，可以先來了解JavaScript中的型別系統，而我在 JavaScript型別筆記 中提到，JavaScript 的型別分為

1. 基本型別 (number, boolean, undefined, null, string, symbol, void)
2. 物件型別 (functions , arrays , classes , objects)

但是對於 JavaScript 而言，變數的型別是能夠被改變的，如下方程式碼中的變數 signedIn 原先屬於 boolean ，而後將數字 100 傳入後，其型別變為 Number 。

而 TypeScript 就可以用來防止因為意外而發生型別變更的慘劇， TypeScript 可以想像成 JavaScript 與 Type System (型別系統) 的結合， TypeScript 將程式碼內的變數透過型別系統來規範，因此可以幫助我們在開發階段 (code執行前) 提早發現錯誤。

簡而言之， TypeScript 透過 Type Annotation (型別註記) 來標記變數的型別，以便檢查程式碼是否有出現錯誤; 如下方程式碼中透過 TypeScript Annotation 將變數 signedIn 定義為 boolean 型別，再將數字100傳入變數 signedIn ，此時 TypeScript Compiler 會在該行程式碼告知數字不該被傳入該變數，因為它屬於 boolean 型別。此外， TypeScript 除了有助於開發階段的除錯外，也可幫助工程師加速理解程式碼的內容(理解變數的意義以及型別等)。

TypeScript 只有在開發階段才有其意義，且無法對程式碼進行表現上的優化，此外因為瀏覽器只認得 JavaScript 程式碼， TypeScript 在執行後會透過 TypeScript Compiler 編譯成 JavaScript 程式碼來讓瀏覽器看得懂。

型別註記 (Type Annotations)、型別推論 (Type Inference) 、型別斷言 (Type assertion)

• 型別註記 (Type Annotations) : 我們明確的告知 TypeScript 某變數應當為什麼型別。

• 型別推論 (Type Inference) : TypeScript 自行去推斷某變數應該是什麼型別。

Type Inference is used in default

• 型別斷言 (Type Assertions) : 當我們明確知道變數的型別，但 TypeScript 無法了解的時候。

使用型別註記 (Type annotations) 的時機

1. 當函示回傳的變數為 any 時，如下方的JSON.parse(json)，該方法會因為傳入的參數型態而回傳不同的型別

1. 若某變數需要先行宣告，但沒有立即將變數傳入時，需確保某變數不會受到型別推論 (Type Annotation) 而變為 any。

1. 當某變數可能具有多種型別時

函式的 Annotation

• 告知 TypeScript 函示應該 1. 引入參數的型別以及 2. 會回傳什麼型別的變數
• 如果沒有註記函式的回傳變數， TypeScript 會透過函式推斷 (Type Inference) 來判斷回傳的型別

物件的 Annotation

陣列的 Annotation

• TypeScript 可以避免將錯誤的型別加入陣列中。
• TypeScript 透過型別推斷 (Type Inference) 來判斷從陣列存取 value 的型別，且 map 、 forEach 、 reduce 也有相同的效果。
• 可以透過 Tuple 方式來規範陣列中依序有哪些型別。

額外補充 - any 與 unknown 的差異

any 在語意上比較像是

• 「請不要做型別檢查，反正一定會正確」
• 任何操作都允許，不會報錯啦
• 等於是在告訴 Compiler：「別管了，我知道我在做什麼」

unknown 在語意上比較像是

• 「這個值我暫時不知道是什麼型別，但我會怕，我想要保持安全」
• 和 any 一樣可以接收任何的值，但不能直接做運算或是屬性的存取
• 使用前必須「先做型別縮小 (type narrowing)」或「型別斷言」(type assertion)。

any 範例

Note: any 會讓 TypeScript 失去靜態檢查的能力，潛在 bug 不會被攔下。

unknown 範例

Note: unknown 讓 TypeScript 保留靜態檢查，強迫你先確認型別，才允許後續操作。

我自己的心得來說，any 除非真的沒辦法（像是處理舊專案、臨時跳過檢查），不然最好少用；如果你只是單純不知道型別是什麼，那應該優先用 unknown，這樣 TypeScript 會逼你先確認型別再用，比較安全。

參考資料

• Typescript : The Complete Developer's Guide