跳至主要內容
日沐 SunBathe

Appearance

TypeScript 完整指南 ​

TypeScript 為 JavaScript 加上靜態類型，讓程式碼更安全、更易維護。本系列將帶你從零開始，一步步掌握 TypeScript 的核心概念與實戰應用。

系列特色 ​

  • 28 篇從基礎到進階的完整內容
  • 每篇都有進階挑戰
  • Vue3 + Vite 整合實戰
  • Node.js/Express 後端應用
  • 類型體操與進階技巧

階段一：基礎入門（5 篇） ​

從環境建置到基礎類型，打好 TypeScript 根基。

  1. TypeScript 是什麼？為什麼要用？ - 優勢與編譯流程
  2. 環境建置：Node、Vite、Playground - 開發環境完整配置
  3. 基礎類型完全解析 - string、number、boolean、陣列
  4. 物件、陣列與元組 - 資料結構類型定義
  5. 函式類型與重載 - 參數、回傳值、重載

階段二：進階類型系統（6 篇） ​

深入類型系統，掌握進階技巧。

  1. interface vs type 深度比較 - 擴展、合併差異
  2. 聯合類型與交叉類型 - Union & Intersection
  3. 字面量類型與模板字面量 - Template Literal Types
  4. 類型守衛與類型收窄 - typeof、instanceof、in、is
  5. 類型斷言與 as const - 斷言的正確使用
  6. unknown vs any vs never - 特殊類型解析

階段三：泛型深度剖析（4 篇） ​

讓程式碼更靈活、更可重用。

  1. 泛型基礎：函式、介面、類別 - 泛型入門
  2. 泛型約束與預設值 - extends、keyof
  3. 條件類型：infer 關鍵字 - 進階類型推導
  4. 映射類型與索引類型 - 類型轉換技巧

階段四：Vue3 + TS 完整實戰（6 篇） ​

將 TypeScript 應用到 Vue3 專案中。

  1. Vue3 + Vite + TS 專案建置 - 完整專案架構
  2. Composition API 完整類型標註 - script setup 類型
  3. Props、Emit、Expose 類型 - 元件介面定義
  4. Ref、Reactive、Computed 類型 - 響應式類型
  5. Pinia 狀態管理 + TS - 類型安全的狀態管理
  6. Vue Router + TS 路由類型 - 路由參數類型

階段五：Node.js/Express + TS（4 篇） ​

後端也要類型安全！

  1. Node.js + TS 環境設定 - 專案配置
  2. Express + TS：Request/Response 類型 - API 類型
  3. API 類型安全：Zod 驗證 - 請求驗證
  4. 前後端類型共享策略 - Monorepo、tRPC

階段六：類型體操與實戰（3 篇） ​

挑戰進階類型技巧。

  1. 內建工具類型實作原理 - Partial、Pick、Omit
  2. 自訂工具類型實戰 - DeepPartial、路徑類型
  3. 總結：TypeScript 知識地圖 - 速查表與學習路徑

學習路線建議 ​

新手：階段一 → 階段二 → 階段四
中階：階段二 → 階段三 → 階段四
進階：階段三 → 階段五 → 階段六

前置知識 ​

  • JavaScript 基礎（ES6+）
  • Node.js 基礎
  • Vue3 基礎（Composition API）

開始你的 TypeScript 之旅吧！