cover

概念圖

一句話:TypeScript 把「使用者幫你找 bug」變成「編譯器幫你找 bug」。

先講結論

TypeScript 不是萬靈丹,但如果你的專案會活超過三個月、或有超過一個人在寫,不用 TypeScript 基本上是在賭運氣。它最大的價值不是「多了型別」,而是讓你在按下執行之前就知道哪裡會炸。

JavaScript 到底有多野?

你有沒有被 JavaScript 的隱式轉換嚇過?

"5" + 3      // "53"——字串串接,不是加法
"5" - 3      // 2——突然又變數學了
true + true  // 2——布林也能加?
[] + {}      // "[object Object]"——???

一個人寫 side project 的時候,這些可能只是茶餘飯後的笑話。但想像一下,你跟五個人共同維護一個電商網站,某天結帳金額顯示 NaN——你覺得是誰的鍋?大概是最後 commit 的那個人。

一個讓你秒懂的 Bug 場景

後端同事某天偷偷改了 API 回傳格式:

// 你以為長這樣
const user = { name: "Alice", age: 25 };
 
// 其實已經變成這樣
const user = { name: "Alice", profile: { age: 25 } };
 
// 你的程式碼還在開心地寫
console.log(user.age);  // undefined,畫面直接顯示 undefined

JavaScript 不會報錯。它覺得 undefined 是完全合理的值。直到 PM 截圖問你「這個 undefined 是什麼意思」,你才開始一行一行翻 code。

如果用 TypeScript 呢?

interface User {
  name: string;
  profile: { age: number };
}
 
const user: User = await fetchUser();
console.log(user.age);
//               ^^^ Property 'age' does not exist on type 'User'

還沒跑就抓到了,對吧?你甚至不用打開瀏覽器。

「但 TypeScript 好麻煩啊」

我知道你在想什麼,所以直接回應三個最常聽到的抱怨:

「要多寫好多程式碼」——TypeScript 的型別推論其實很聰明,很多時候你根本不用手動標型別。而且你省下的 debug 時間,絕對比多打那幾個字多。

「學習曲線太高」——基礎的 TypeScript 就是 JavaScript 加上型別註解,大概半天就能上手。泛型、條件型別那些進階的東西?之後再學,不影響你現在開始用。

「小專案不需要」——小專案有時候會長大,對吧?一開始就用 TypeScript,比之後把整個專案從 JS 遷移到 TS 輕鬆十倍。問問那些遷移過的人,他們的表情會告訴你一切。

什麼時候真的不需要?

我不是 TypeScript 信徒,有些場景確實不需要:

  • 寫個一次性腳本處理 CSV,用 JS 就好
  • Hackathon 搶速度,型別安全可以晚點再說
  • 團隊零 TS 經驗又趕死線——硬導入只會更慢

重點是:TypeScript 是工具,不是信仰。 根據情境選擇就好。

怎麼開始?

現在主流框架都內建支援,起手超簡單:

# React
npx create-react-app my-app --template typescript
 
# Vue
npm create vue@latest  # 選 TypeScript
 
# Angular 預設就是 TS,不用選
ng new my-app

或者手動編譯也行:

npm install -g typescript
tsc hello.ts    # 單一檔案
tsc             # 整個專案

如果你讀完還是覺得 JavaScript 就夠了——沒關係,等你被 undefined is not a function 搞到第三次的時候,TypeScript 會在這裡等你。

延伸閱讀