什麼是 TypeScript？非工程師的白話指南
TypeScript 就是加上型別的 JavaScript。你可以標示每個值應該是哪種資料，例如數字、文字或訂單清單，TypeScript 會在程式執行前檢查是否有不一致的地方。TypeScript 官網將它描述為「帶有型別語法的 JavaScript」；型別在轉換成一般 JavaScript 時會被移除，之後就能在任何能執行 JavaScript 的環境中運行。
為什麼用 AI 建置時要了解它
AI 模型寫程式碼的速度很快，但快速產生的程式碼難免有錯：一個檔案中的欄位叫 customerName，另一個檔案中卻是 customer_name；價格以文字而非數字傳遞；函式呼叫時缺少了某個值。在一般的 JavaScript 中，許多這類錯誤要等到有人點了錯的按鈕才會出現。
TypeScript 能在撰寫程式碼的階段就抓出很多錯誤：
- AI 會立即得到回饋。 型別錯誤會指出有問題的確切行數，所以代理程式可以在你看到之前就修正它。
- 修改更安全。 如果你重新命名一個欄位，TypeScript 會標出所有仍在使用舊名稱的地方。
- 程式碼能自我說明。 型別會記錄函式預期接收和回傳什麼，對你、AI 以及日後接手的開發者都很有幫助。
- 編輯器更聰明。 因為編輯器知道每個值是什麼，自動完成和「跳到定義」都能運作得更好。
這也是許多 AI 應用程式建置工具預設使用 TypeScript 的重要原因。
日常比喻
想像一間有標示貨位的倉庫。每個貨位都有一塊標示牌：「僅限棧板」、「冷藏」、「最大 500 公斤」。貨物送達時，門口的檢查員會把貨物與標示牌比對。要放進乾貨區的冷凍魚，會在門口就被攔下，而不是等一週後發出臭味才被發現。
TypeScript 就是門口的檢查員，型別就是那些標示牌。檢查發生在貨物（也就是你的程式碼）投入使用之前。等一切就位後，標示牌會被拿掉：執行中的 JavaScript 已經沒有任何型別。
TypeScript 如何運作
- 你（或 AI）撰寫
.ts或.tsx檔案：TypeScript 程式碼，附帶型別標示。 - 型別檢查器讀取程式碼，並在編輯器或建置過程中將不一致之處回報為錯誤。
- 建置步驟移除型別，產生一般的 JavaScript。
- JavaScript 在瀏覽器或伺服器上執行（Node.js、Deno、Bun）。
一個重要的結果是：TypeScript 檢查的是你寫的程式碼，而不是應用程式執行時到達的資料。如果外部 API 回傳了意外的內容，除非你加入執行期驗證，否則 TypeScript 看不見它。
實例：預約表單
假設你正在為一間髮廊建置預約應用程式。以下是描述一筆預約的型別：
type Booking = {
id: number;
customerEmail: string;
service: "haircut" | "colour" | "blow-dry";
startsAt: Date;
price: number;
notes?: string; // the ? means optional
};
以及計算訂金的函式：
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 在執行時是看不到的。這就是為什麼設計良好的應用程式也會驗證傳入的資料，通常會使用驗證函式庫來檢查結構，並將其轉換成正確的 Booking。
TypeScript 與 JavaScript 比較
| JavaScript | TypeScript | |
|---|---|---|
| 它是什麼 | 瀏覽器執行的語言 | JavaScript 加上型別語法 |
| 可直接在瀏覽器中執行 | 是 | 要先轉換成 JavaScript |
| 抓出型別錯誤 | 執行時才抓（如果有的話） | 撰寫時、執行前就抓 |
| 設定 | 無 | 需要建置步驟（通常由 Vite 或 Next.js 等工具處理） |
| 適合 | 小型腳本、快速實驗 | 會持續成長與變動的應用程式 |
| 檔案副檔名 | .js、.jsx | .ts、.tsx |
常見術語說明
| 術語 | 意義 |
|---|---|
| 型別（Type） | 描述一個值可以是什麼：數字、文字或特定的物件結構。 |
| 型別標註（Type annotation） | 寫在程式碼中的標示，例如 price: number。 |
| 型別推論（Type inference） | TypeScript 不靠標示，自行推斷型別。 |
| 介面／型別別名（Interface / type alias） | 為物件結構取的名稱，例如 Booking。 |
| 聯合型別（Union type） | 值可以是幾個選項之一，例如 "haircut" | "colour"。 |
| 選填屬性（Optional property） | 可以不存在的欄位，以 ? 標示。 |
any | 讓某個值停止檢查的型別，是應謹慎使用的逃生口。 |
| 型別錯誤（Type error） | TypeScript 回報某些內容不一致的訊息。 |
| 編譯／轉譯（Compile / transpile） | 把 TypeScript 轉換成 JavaScript。 |
.tsx | 含有 JSX 的 TypeScript 檔案，用於 React 應用程式。 |
tsconfig.json | 設定 TypeScript 對專案檢查有多嚴格的設定檔。 |
| 執行期驗證（Runtime validation） | 在應用程式執行時檢查實際傳入的資料。 |
常見錯誤與迷思
- 「TypeScript 能讓程式碼沒有錯誤。」 它只能抓出資料結構的不一致，抓不出錯誤的邏輯。把 2% 寫成 20% 的訂金，型別檢查仍然會通過。
- 「型別能保護我免於錯誤的輸入。」 型別在執行時就消失了。來自使用者、表單和 API 的資料都要驗證。
- 到處都是
any。 AI 卡住時，可能會使用any或// @ts-ignore來壓制錯誤。這是掩蓋問題，而不是解決問題。 - 因為預覽能運作就忽略型別錯誤。 有些工具仍會執行含有型別錯誤的程式碼，這些錯誤仍然是等待發生的隱患。
- 「TypeScript 比較慢。」 型別在執行前就被移除了；實際執行的 JavaScript 基本上是一樣的。
- 「它只適合大型團隊。」 獨自開發的人也能受益，尤其是當大部分修改都由 AI 完成時。
向 AI 建置工具提出的要求
- 「請開啟 TypeScript 的嚴格模式。」
- 「為我們的主要紀錄（Customer、Booking、Invoice）定義共用型別，並同時用於前端與後端。」
- 「不要用
any或@ts-ignore來繞過錯誤；請修正根本問題，並告訴我原因。」 - 「在伺服器端驗證所有傳入的資料，不要只靠型別。」
- 「在告訴我完成之前，請執行型別檢查並修正所有錯誤。」
- 「重新命名欄位時，請更新 TypeScript 標出的每一處。」
- 「用白話解釋這個型別錯誤。」
若要進一步檢查 AI 產生的內容，請參閱如何檢視 AI 產生的程式碼以及如何除錯 AI 建置的應用程式。
Mythex 中的 TypeScript
如果你沒有特別要求，Mythex 會以 Vite + React + TypeScript + Tailwind 建立新專案。程式碼編輯器內含語言智慧功能，包括 TypeScript 與 JavaScript（以及其他語言）的自動完成、診斷和跳到定義，因此型別錯誤會直接顯示在程式碼中，而不只出現在預覽裡。編輯器在免費版為唯讀，Pro 版則可完整編輯。你仍然可以在第一則提示中要求不同的設定；技術選擇方式的文件說明了流程，而程式碼編輯器文件則說明編輯器顯示的內容。
常見問題
用簡單的話來說，什麼是 TypeScript？
TypeScript 是加上型別的 JavaScript。你可以標示每個值應該是哪種資料，例如數字、文字或客戶紀錄，TypeScript 會在程式執行前檢查是否有不一致的地方。之後它會被轉換成一般的 JavaScript。
TypeScript 和 JavaScript 是不同的語言嗎？
TypeScript 是 JavaScript 的超集：也就是 JavaScript 加上用於型別的額外語法。TypeScript 官網將它描述為「帶有型別語法的 JavaScript」。在轉換成 JavaScript 以便執行時，型別會被移除。
為什麼 AI 應用程式建置工具會使用 TypeScript？
型別讓 AI 和周邊工具能快速抓出錯誤，例如把文字傳入需要數字的地方，或拼錯欄位名稱。錯誤會在使用者碰到之前就顯示出來，讓 AI 產生的程式碼更容易檢查和修改。
TypeScript 能讓應用程式沒有錯誤嗎？
不能。它能抓出一整類關於資料結構的錯誤，但抓不出錯誤的商業邏輯；除非你另外加入驗證，否則它也無法檢查執行時從使用者或 API 傳來的資料。
TypeScript 是誰開發的？
TypeScript 是由 Microsoft 開發的開放原始碼語言，可在 JavaScript 能運行的任何地方執行，包括瀏覽器、Node.js、Deno 和 Bun。