前言

雖然在初學 JS 的時候，就稍微提過 TS 這東西，但大概是從去前底開始才真正的在專案中需要用 TS 去寫，然後就再也沒碰到單純用 JS 寫的專案了，所以後續要寫的文章的專案也會繼續用到 TS，那就用一點篇幅先來寫點相關的筆記。

TS 是什麼

TypeScript（簡稱 TS）是微軟公司開發的一種基於 JavaScript（簡稱 JS）的編程語言。它並非創造全新語言，而是為 JavaScript 增加類型系統，使其更適合大型企業級項目的開發。

TypeScript 是 JavaScript 的超集（superset），這意味著：

• 所有合法的 JavaScript 代碼都是合法的 TypeScript 代碼
• TypeScript 在 JavaScript 基础上新增了類型註解、接口、泛型等特性
• 現有的 JavaScript 項目可以逐步遷移到 TypeScript

類型的概念

類型（type）指的是一組具有相同特徵的值。如果兩個值具有某種共同的特徵，就可以說，它們屬於同一種類型。

舉例來說，123 和 456 這兩個值，共同特徵是都能進行數值運算，所以都屬於「數值」（number）這個類型。

類型是人為添加的一種編程約束和用法提示。主要目的是在軟體開發過程中，為編譯器和開發工具提供更多的驗證和幫助，幫助提高代碼質量，減少錯誤。

JavaScript vs TypeScript 示例

// JavaScript - 動態類型
let value = 123;        // value 是數字
value = "hello";        // 現在 value 是字符串，允許但可能導致錯誤

// TypeScript - 靜態類型
let value: number = 123;  // 明確聲明 value 是數字類型
value = "hello";          // 編譯錯誤！不能將字符串賦值給數字類型

動態類型與靜態類型

前面說了，TypeScript 的主要功能是為 JavaScript 添加類型系統。大家可能知道，JavaScript 語言本身就有一套自己的類型系統，比如數值 123 和字符串 Hello。

但是，JavaScript 的類型系統非常弱，而且沒有使用限制，運算符可以接受各種類型的值。在語法上，JavaScript 屬於動態類型語言。

TypeScript 引入了一個更強大、更嚴格的類型系統，屬於靜態類型語言。

類型檢查時機

• 動態類型：在程序運行時檢查類型，錯誤可能在生產環境才被發現
• 靜態類型：在程序編譯時檢查類型，錯誤在開發階段就能被發現

靜態類型的優點

1. 有利於代碼的靜態分析

有了靜態類型，不必運行代碼，就可以確定變量的類型，從而推斷代碼有沒有錯誤。這就叫做代碼的靜態分析。

這對於大型項目非常重要，單單在開發階段運行靜態檢查，就可以發現很多問題，避免交付有問題的代碼，大大降低了線上風險。

2. 有利於發現錯誤

由於每個值、每個變量、每個運算符都有嚴格的類型約束，TypeScript 就能輕鬆發現拼寫錯誤、語義錯誤和方法調用錯誤，節省開發時間。

3. 更強大的開發體驗

IDE（集成開發環境，比如 VSCode）可以基於類型信息提供：

• 智能提示：輸入對象後自動顯示可用的屬性和方法
• 參數提示：調用函數時顯示參數類型和說明
• 錯誤檢測：即時標記類型錯誤，無需運行代碼
• 重構安全：重命名變量或函數時自動更新所有引用

4. 提供了代碼文檔

類型信息可以部分替代代碼文檔，解釋應該如何使用這些代碼，熟練的開發者往往只看類型，就能大致推斷代碼的作用。借助類型信息，很多工具能夠直接生成文檔。

5. 有助於代碼重構

修改他人的 JavaScript 代碼，往往非常痛苦，項目越大越痛苦，因為不確定修改後是否會影響到其他部分的代碼。

類型信息大大減輕了重構的成本。一般來說，只要函數或對象的參數和返回值保持類型不變，就能基本確定，重構後的代碼也能正常運行。如果還有配套的單元測試，就完全可以放心重構。越是大型的、多人合作的項目，類型信息能夠提供的幫助越大。

綜上所述，TypeScript 有助於提高代碼質量，保證代碼安全，更適合用在大型的企業級項目。這就是為什麼大量 JavaScript 項目轉成 TypeScript 的原因。

靜態類型的缺點

1. 喪失了動態類型的代碼靈活性

動態類型有非常高的靈活性，給予程序員很大的自由，靜態類型將這些靈活性都剝奪了。

2. 增加了編程工作量

有了類型之後，程序員不僅需要編寫功能，還需要編寫類型聲明，確保類型正確。這增加了不少工作量，有時會顯著拖長項目的開發時間。

3. 更高的學習成本

類型系統通常比較複雜，要學習的東西更多，要求開發者付出更高的學習成本。

4. 引入了獨立的編譯步驟

原生的 JavaScript 代碼，可以直接在 JavaScript 引擎運行。添加類型系統以後，就多出了一個單獨的編譯步驟，檢查類型是否正確，並將 TypeScript 代碼轉成 JavaScript 代碼，這樣才能運行。

5. 兼容性問題

TypeScript 依賴 JavaScript 生態，需要用到很多外部模塊。但是，過去大部分 JavaScript 項目都沒有做 TypeScript 適配，雖然可以自己動手做適配，不過使用時難免還是會有一些兼容性問題。

總的來說，這些缺點使得 TypeScript 不一定適合那些小型的、短期的個人項目。

適用場景

推薦使用 TypeScript 的情況：

• 大型項目（超過 10,000 行代碼）
• 多人協作開發
• 長期維護的項目
• 對代碼質量要求較高的項目
• 需要重構的遺留項目

可以考慮繼續使用 JavaScript 的情況：

• 快速原型開發
• 小型個人項目
• 學習階段的簡單練習
• 對開發速度要求極高的短期項目
• 簡單的腳本或工具

參考

wiki