TypeScript 基礎觀念

歡迎來到 TypeScript 的世界！在開始寫程式碼之前，我們需要先建立一個核心觀念：為什麼我們需要 TypeScript？它跟 JavaScript 到底差在哪裡？

靜態型別 vs 動態型別

要理解 TypeScript，我們可以把它想像成文書處理軟體的「拼字檢查」功能。

  • JavaScript (動態型別)：就像是用手寫信。你可以寫得很自由，隨意發揮。但是，如果你不小心拼錯字（例如把 apple 寫成 aple），你可能要等到信寄出去，對方收到了看不太懂，你才會知道「啊！我寫錯了」。在程式中，就是等到程式執行時 (Runtime) 才報錯。
  • TypeScript (靜態型別)：就像是用 Word 打字。當你打錯字時，底下立刻會出現「紅色波浪底線」告訴你這裡有問題。你不需要等到列印出來（執行程式），在打字的當下（編譯時期 Compile Time）就知道哪裡錯了。

這就是 TypeScript 的核心價值：它把錯誤發現的時間點，從「使用者執行時」提前到了「開發者寫扣時」。

為什麼要用 TypeScript？

1. 提早發現錯誤 (Catch Errors Early)

JavaScript 最常見的錯誤之一就是 Uncaught TypeError: Cannot read property 'x' of undefined。

// JavaScript
function printName(user) {
  console.log(user.nmae.toUpperCase()); // 把 name 拼成 nmae 了！
}

printName({ name: 'Alice' });
// 結果：程式執行時崩潰 (Runtime Error)

如果是 TypeScript，它會在你存檔的瞬間告訴你：

// TypeScript
function printName(user: { name: string }) {
  // 紅色波浪線：Property 'nmae' does not exist on type '{ name: string }'.
  console.log(user.nmae.toUpperCase());
}

2. 更好的開發體驗 (Better DX)

因為 TypeScript「認識」你的程式碼結構，所以編輯器（如 VS Code）可以提供超強的自動補全 (IntelliSense)。

當你打 user. 時，編輯器會列出 name、age 等屬性讓你選，不用再去翻文件或記變數名稱。這對開發效率是巨大的提升。

3. 程式碼即文件 (Code as Documentation)

在 JavaScript 中，看到一個函式 function add(a, b)，你可能不知道 a 和 b 到底是數字還是字串？

但在 TypeScript 中：

function add(a: number, b: number): number {
  return a + b;
}

這行程式碼本身就告訴了你：

  1. 它接受兩個參數，且必須是「數字」。
  2. 它會回傳一個「數字」。

這讓團隊合作變得更容易，因為看程式碼就能懂它是做什麼的。

如何開始？

TypeScript 檔案的副檔名是 .ts（如果是 React 專案則是 .tsx）。

因為瀏覽器看不懂 TypeScript，所以我們需要一個「編譯 (Compile)」的步驟，把 .ts 檔案轉換成瀏覽器看得懂的 .js 檔案。

# 安裝 TypeScript 編譯器
npm install -g typescript

# 編譯檔案
tsc hello.ts
# -> 會產生 hello.js

不過在現代前端開發中（例如使用 Vite, Next.js），通常這些工具都已經幫你設定好自動編譯了，你只需要專注寫 .ts 檔案即可。