什麼係 TypeScript？非開發者淺白指南

TypeScript 係加咗類型嘅 JavaScript。你可以加上標籤，說明每個值應該係乜類型：一個數字、一段文字，或者一張訂單列表。TypeScript 會喺代碼執行之前，檢查有冇類型不符。TypeScript 官網將佢形容為「附帶類型語法嘅 JavaScript」；代碼轉換成普通 JavaScript 時，類型會被移除，之後嗰個 JavaScript 就可以喺任何運行 JavaScript 嘅地方執行。

用 AI 建構時點解 TypeScript 重要

AI 模型寫代碼好快，但快嘅代碼會有錯：一個檔案叫 customerName，另一個叫 customer_name；價錢以文字而唔係數字傳入；函式調用時漏咗一個值。喺普通 JavaScript 入面，好多呢類錯誤要等到有人撳錯掣先會出現。

TypeScript 會更早捉到好多呢類錯誤，即係喺寫代碼嗰陣就攔住：

• AI 即時得到回饋。 類型錯誤會指出確切嘅錯誤行，所以 agent 可以喺你見到之前就修正。
• 修改更安全。 改咗一個欄位名稱，TypeScript 會標示所有仍然用舊名稱嘅位置。
• 代碼本身已經說明清楚。 類型記錄咗函式需要乜嘢、回傳乜嘢，幫助你、AI，以及日後任何接手嘅開發者。
• 編輯器更聰明。 自動完成同「跳到定義」都會更好用，因為編輯器知道每個值係乜類型。

呢個係好多 AI App 建構工具預設採用 TypeScript 嘅一大原因。

日常比喻

諗吓一間設有分區貨架嘅倉庫。每個分區都有個牌子：「只限棧板」、「需要冷藏」、「最多 500 公斤」。貨物到達時，門口嘅檢查員會將貨物同牌子對照。如果一批冷凍魚被送去乾貨區，佢會喺門口就被攔住，而唔係等一個星期之後先發現，到嗰陣已經發臭。

TypeScript 就係門口嘅檢查員。類型就係嗰啲牌子。檢查喺貨物（即係你嘅代碼）投入使用之前進行。當一切安排妥當之後，牌子就被拿走：正在運行嘅 JavaScript 裏面已經冇任何類型。

TypeScript 點運作

1. 你（或者 AI）寫 .ts 或 .tsx 檔案：即係附有類型標籤嘅 TypeScript。
2. 類型檢查器讀取代碼，並將不符之處以錯誤形式喺編輯器或者建構時報告。
3. 建構步驟移除類型，生成普通 JavaScript。
4. JavaScript 喺瀏覽器或者伺服器上運行（Node.js、Deno、Bun）。

一個重要後果：TypeScript 檢查嘅係你寫嘅代碼，而唔係App 運行期間傳入嘅數據。如果外部 API 傳回一啲意料之外嘅嘢，除非你加入運行時驗證，否則 TypeScript 睇唔到。

實際例子：預約表格

假設你正在為一間髮廊建造預約 App。以下係描述預約嘅類型：

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? 表示可選
};

以及一個計算按金嘅函式：

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

而家睇吓 TypeScript 會捉到啲乜。

欄位拼錯。

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript 會報告 prise 唔係已知屬性，而且缺少 price。喺普通 JavaScript 入面，呢段代碼會靜靜咁計出一個 NaN（唔係數字）嘅按金。

錯誤類型嘅值。

const booking: Booking = { ...otherFields, price: "40" };

TypeScript 會報告字串唔可以用喺需要數字嘅位置。冇佢嘅話，"40" * 0.2 恰巧可以運作，但 "40" + 5 會得出 "405"——呢類錯誤會喺發票上面出現。

唔存在嘅服務。

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript 會報告 "perm" 唔係允許嘅服務之一。日後髮廊加咗燙髮服務，你只需要將佢加落類型入面，TypeScript 就會標示每個需要更新嘅位置：價目表、表格、日曆顏色。

佢捉唔到嘅嘢。 如果預約表格由瀏覽器傳送 price: "40" 去伺服器，伺服器上嘅 TypeScript 喺運行時睇唔到呢個情況。所以設計好嘅 App 亦會驗證傳入嘅數據，通常用一個驗證函式庫檢查結構，並將其轉換成正確嘅 Booking。

TypeScript 同 JavaScript 比較

常用詞語解釋

常見錯誤同誤解

• 「TypeScript 令代碼冇 bug。」 佢捉到嘅係數據結構上嘅不符，唔係錯誤嘅業務邏輯。按金應該係 20%，寫成 2% 都可以通過類型檢查。
• 「類型可以保護我免受錯誤輸入。」 類型喺運行時會消失。用戶、表格同 API 嘅數據都要驗證。
• 到處用 any。 AI 卡住嗰陣，可能會用 any 或者 // @ts-ignore 去消除錯誤。咁只係隱藏問題，而唔係解決問題。
• 因為預覽運作正常就忽略類型錯誤。 有啲工具仍然會運行有類型錯誤嘅代碼。嗰啲錯誤依然係等待爆發嘅 bug。
• 「TypeScript 會慢啲。」 類型喺運行前已經移除；實際運行嘅 JavaScript 基本上一樣。
• 「只係大團隊先用得著。」 獨立建構者都會受惠，尤其係 AI 負責大部分修改嗰陣。

要問 AI 建構工具嘅嘢

• 「用 TypeScript 並開啟 strict 模式。」
• 「為我哋主要嘅紀錄（Customer、Booking、Invoice）定義共用類型，並同時用於前端同後端。」
• 「唔好用 any 或 @ts-ignore 去過關；要修正根本問題，並告訴我係乜問題。」
• 「喺伺服器上驗證所有傳入數據，唔好只靠類型。」
• 「運行類型檢查器，修正所有錯誤之後先話俾我知完成。」
• 「改咗欄位名稱嗰陣，更新 TypeScript 標示嘅每一個位置。」
• 「用平白嘅語言解釋呢個類型錯誤。」

想了解點樣檢查 AI 生成嘅代碼，可以睇 how to review AI-generated code 同 how to debug an AI-built app。

Mythex 入面嘅 TypeScript

如果你冇要求特別嘅設定，Mythex 開新項目時會預設用 Vite + React + TypeScript + Tailwind。代碼編輯器包括語言智能功能（TypeScript 同 JavaScript 嘅自動完成、診斷同跳到定義，以及其他語言），所以類型錯誤喺代碼入面就睇得到，而唔只係喺 Preview 入面。Free 嘅編輯器係唯讀，Pro 則可以完全編輯。你仍然可以喺第一個提示入面要求另一種設定；how the tech is chosen 嘅 docs 頁面解釋咗點樣揀，而 code editor docs 就講解編輯器會顯示乜嘢。

常見問題