Skip to main content

typescript

TypeScript 簡介

TypeScript 的基本定義

  • TypeScript 是 JavaScript 的超集,具備靜態類型的特性。

  • 它可以防止許多常見的錯誤,提升代碼的可讀性。

  • TypeScript 需要編譯成 JavaScript 才能在瀏覽器中運行。

TypeScript 的優勢

  • 可以提前發現約 15% 的常見錯誤。

  • 提升團隊協作時的代碼可讀性。

  • 增加求職機會,因為許多工作要求掌握 TypeScript。

TypeScript 的缺點

  • 編寫代碼的時間較長,特別是小型項目。

  • 需要編譯,對於大型項目可能會增加時間成本。

TypeScript 的設置

安裝 Node 和 TypeScript 編譯器

  • 確保全局安裝 Node。

  • 使用命令 npm i -g typescript 安裝 TypeScript 編譯器。

編譯 TypeScript 代碼

  • 使用 tsc index.ts 將 TypeScript 編譯為 JavaScript。

  • 可以使用 tsc index.ts -w 自動監視文件變化並編譯。

tsconfig.json 文件的設置

  • 使用 tsc --init 創建 tsconfig.json 文件。

  • 設置編譯選項,如 target 和 outDir 。

TypeScript 的類型系統

基本類型

  • 包括 string 、 number 、 boolean 等七種基本數據類型。

  • 使用類型註解來明確變量的類型。

參考類型

  • 主要包括數組、對象和函數。

  • 參考類型的變量指向內存中的地址,改變一個變量會影響另一個。

TypeScript 中的數組和元組

  • 可以定義數組的具體類型,如 let ids: number[] 。

  • 元組是一種固定大小和已知數據類型的數組。

TypeScript 中的對象與接口

對象的類型註解

  • 使用類型註解來定義對象的屬性及其類型。

  • 可以使用接口來定義多個對象的相同屬性。

接口的擴展

  • 接口可以擴展,允許添加新屬性。

  • 使用接口來定義函數簽名,確保函數的參數和返回值類型一致。

類與接口的結合

  • 類可以實現接口,確保類中包含特定的屬性和方法。

  • 接口不會被編譯到 JavaScript 中,減少代碼冗餘。

TypeScript 的優勢

  • 提供靜態類型檢查,減少運行時錯誤。

  • 增強代碼的可維護性和可讀性,特別是在大型應用中。

TypeScript 的進階特性

泛型的使用

  • 泛型允許創建可重用的組件,支持多種數據類型。

  • 使用泛型時,可以捕獲傳入對象的類型。

列舉類型

  • 列舉類型提供一組相關的常量,增強代碼的可讀性。

  • 支持數字和字符串類型的列舉。

嚴格模式的設置

  • 建議在 tsconfig.json 中啟用嚴格模式以提高類型檢查。

  • 嚴格模式下,TypeScript 將報告更多錯誤,幫助開發者避免潛在的問題。

參考資料

Learn TypeScript – The Ultimate Beginners Guide