測驗：TypeScript 是什麼？為什麼值得學？
共 5 題，點選答案後會立即顯示結果
1. TypeScript 和 JavaScript 之間的關係，下列哪個描述最正確？
2. TypeScript 的型別標註在什麼時候存在？
function add(a: number, b: number): number {
return a + b;
}
3. JavaScript 是動態型別語言，這導致了什麼問題？
function greet(name) {
return “Hello, ” + name.toUpperCase();
}
greet(123); // ???
4. 下列關於 TypeScript 編譯流程的說明，何者正確？
5. 在 TypeScript 的 interface 定義中，description?: string 的 ? 代表什麼意思？
interface Product {
id: number;
name: string;
price: number;
description?: string;
}
一句話說明
TypeScript 就是 JavaScript 加上型別檢查，讓錯誤在寫的時候就被抓到。
為什麼要認識 TypeScript？
如果你用 AI 輔助開發，你幾乎一定會遇到 TypeScript。現在主流的前端框架（React、Next.js、Vue）、後端框架（Express、NestJS）、甚至 AI 工具自己產生的程式碼，預設都是 TypeScript。
看懂 TypeScript，就是看懂 AI 幫你寫的程式碼的第一步。
JavaScript 的問題在哪？
先看一段 JavaScript 程式碼：
function greet(name) {
return "Hello, " + name.toUpperCase();
}
greet("Alice"); // "Hello, ALICE" -- 正常
greet(123); // 執行時才爆炸：name.toUpperCase is not a function
Code language: JavaScript (javascript)JavaScript 是動態型別語言，意思是：變數沒有固定的型別，什麼都能傳進去。問題是——你傳錯了，要等到程式真的跑到那一行才會出錯。
這會帶來三個痛點：
| 痛點 | 說明 |
|---|---|
| 執行時才爆炸 | Bug 藏在程式碼裡，測試沒跑到就不知道 |
| IDE 無法幫你 | 編輯器不知道 name 是什麼型別，無法提供自動補全 |
| 重構像拆炸彈 | 改了一個函式的參數，不知道哪些地方會壞掉 |
TypeScript = JavaScript + 型別系統
TypeScript 怎麼解決？很簡單——告訴程式每個東西是什麼型別：
function greet(name: string) {
// ^^^^^^^^ 加了這個：name 必須是 string
return "Hello, " + name.toUpperCase();
}
greet("Alice"); // 正常
greet(123); // 寫的時候就報錯：不能把 number 傳給 string
Code language: JavaScript (javascript)就這樣。TypeScript 的核心概念就是這一件事：幫變數、參數、回傳值標上型別。
逐行翻譯
function greet(name: string) {
// ^^^^^^^^^^^^ name 這個參數必須是文字
return "Hello, " + name.toUpperCase();
// ^^^^^^^^^^^^^ 因為確定是文字，所以可以安全呼叫
}
Code language: JavaScript (javascript)TypeScript 不是新語言
這是很多人搞混的地方。TypeScript 不是一個全新的語言，它是 JavaScript 的超集（superset）。
用白話說：
所有合法的 JavaScript 程式碼，直接貼到 TypeScript 裡面都能跑。TypeScript 只是「多了型別標註」。
圖解：
┌──────────────────────────────┐
│ TypeScript │
│ ┌────────────────────────┐ │
│ │ JavaScript │ │
│ │ (你已經會的部分) │ │
│ └────────────────────────┘ │
│ + 型別標註 │
│ + interface / type 定義 │
│ + 編譯時檢查 │
└──────────────────────────────┘
Code language: PHP (php)這代表：
- 你學過的 JavaScript 知識全部有效
- TypeScript 只是在上面「加東西」，不會取代任何東西
- 你可以漸進式地加入型別，不需要一次改完
編譯流程：.ts 怎麼變成 .js？
瀏覽器和 Node.js 不認識 TypeScript，它們只認識 JavaScript。所以 TypeScript 需要一個編譯步驟，把 .ts 檔案轉成 .js 檔案。
你寫的程式碼 編譯器處理 瀏覽器/Node.js 執行
app.ts → tsc 編譯 → app.js
(有型別標註) (檢查型別、 (純 JavaScript，
移除型別標註) 型別標註全部消失)
最小範例
你寫的 app.ts：
function add(a: number, b: number): number {
return a + b;
}
Code language: JavaScript (javascript)編譯後產生的 app.js：
function add(a, b) {
return a + b;
}
Code language: JavaScript (javascript)看到了嗎？ 編譯器只是把 : number 這些型別標註移除掉。TypeScript 的型別只存在於「寫程式的時候」，執行時完全不存在。
翻譯對照
| 你會看到的 | 意思 |
|---|---|
tsc |
TypeScript Compiler，把 .ts 編譯成 .js |
tsconfig.json |
TypeScript 的設定檔，告訴編譯器怎麼編譯 |
.ts 檔案 |
TypeScript 原始碼 |
.tsx 檔案 |
TypeScript + JSX（React 用的） |
.js 檔案 |
編譯後的 JavaScript，給瀏覽器執行 |
.d.ts 檔案 |
型別定義檔，只有型別沒有程式碼（知道就好） |
TypeScript 的三大優勢
優勢 1：自動補全超好用
因為 TypeScript 知道每個變數的型別，IDE 可以精確提示你能用什麼：
const user = {
name: "Alice",
age: 25,
email: "alice@example.com"
};
user. // IDE 會自動列出：name, age, email
// 不用猜，不用查文件
Code language: JavaScript (javascript)對 Vibe Coder 特別重要——當 AI 幫你產生了一個物件，你輸入 . 就能看到它有哪些屬性，不用讀完所有程式碼。
優勢 2：重構更安全
interface User {
name: string;
age: number;
}
// 如果你把 age 改名為 birthYear，
// TypeScript 會立刻標出所有用到 age 的地方
// 不用自己一個一個找
Code language: PHP (php)優勢 3：型別就是文件
function createOrder(
userId: string,
items: CartItem[],
coupon?: string // ? 表示可選
): Promise<Order> { // 回傳 Promise<Order>
// ...
}
Code language: JavaScript (javascript)光看函式簽名就知道：
- 需要傳入 userId（文字）、items（購物車項目陣列）
- coupon 可傳可不傳
- 會回傳一個 Order（非同步）
不需要額外寫註解，型別本身就是最好的文件。
什麼時候該用 TypeScript？
適合用 TypeScript
| 情境 | 原因 |
|---|---|
| 多人協作的專案 | 型別讓團隊成員更容易理解彼此的程式碼 |
| 中大型專案 | 程式碼越多，型別檢查越能幫你抓 Bug |
| 用 AI 產生程式碼 | 有型別才看得懂 AI 在做什麼 |
| 使用框架（React、Next.js 等） | 這些框架本身就用 TypeScript，配合更順 |
可以先不用 TypeScript
| 情境 | 原因 |
|---|---|
| 幾十行的小腳本 | 殺雞用牛刀，加型別反而更慢 |
| 快速原型驗證 | 先跑起來最重要，之後再加型別也行 |
| 學 JavaScript 的第一週 | 先把基礎搞懂，再來加型別 |
Vibe Coder 檢查點
當 AI 幫你產生 TypeScript 程式碼時，確認以下幾點：
- [ ] 看到
: string、: number這些標註嗎？這是型別，告訴你這個變數是什麼 - [ ] 檔案是
.ts或.tsx嗎？那就是 TypeScript，需要編譯才能執行 - [ ] 有沒有看到紅色底線？那是 TypeScript 在告訴你型別不對，要處理
- [ ] AI 有沒有用
any？盡量避免——any等於放棄型別檢查
常見變化
AI 產生的 TypeScript 程式碼，你最常看到這幾種型別寫法：
變化 1：變數型別標註
let count: number = 0;
let name: string = "Alice";
let isReady: boolean = false;
Code language: JavaScript (javascript)翻譯：冒號後面的就是型別，告訴你這個變數只能放什麼。
變化 2：函式參數和回傳值
function fetchUser(id: number): Promise<User> {
// ^^^^^^^^^ ^^^^^^^^^^^^^^^
// 參數型別 回傳型別
// ...
}
Code language: JavaScript (javascript)翻譯：括號裡的 : number 是參數型別，括號外的 : Promise<User> 是回傳型別。
變化 3：interface 定義物件結構
interface Product {
id: number;
name: string;
price: number;
description?: string; // ? 表示這個欄位可以沒有
}
Code language: PHP (php)翻譯：定義一個 Product 資料結構，規定它必須有 id、name、price，description 可有可無。
本篇重點回顧
| 概念 | 一句話 |
|---|---|
| TypeScript 是什麼 | JavaScript 加上型別檢查 |
| 為什麼需要 | 讓錯誤在寫的時候就被抓到，不是跑的時候才爆炸 |
| 超集的意思 | 所有 JS 都是合法的 TS，TS 只是多加了型別 |
| 編譯流程 | .ts 經過 tsc 編譯成 .js，型別在執行時不存在 |
| 最大優勢 | 自動補全、安全重構、型別即文件 |
下一篇預告
下一篇我們會實際動手，看看 TypeScript 的基本型別有哪些、怎麼讀懂 interface 和 type 的定義。
進階測驗：TypeScript 是什麼？為什麼值得學？
測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。
共 5 題，包含情境題與錯誤診斷題。
1. 你正在用 AI 產生一個電商網站的程式碼，AI 生成了以下檔案。你想確認 AI 寫的購物車功能接受哪些參數、回傳什麼資料。最有效率的做法是什麼？ 情境題
function createOrder(
userId: string,
items: CartItem[],
coupon?: string
): Promise<Order> {
// … 200 行程式碼
}
2. 你的團隊正在評估一個新專案要用 JavaScript 還是 TypeScript。這個專案是 3 人協作的中型 React 應用，預計開發半年。根據文章的建議，最合理的決策是什麼？ 情境題
3. 你用 AI 產生了一段 TypeScript 程式碼，IDE 中沒有出現紅色底線，但你注意到 AI 大量使用了 any 型別。根據文章的建議，你應該怎麼做？ 情境題
function processData(data: any): any {
const result: any = data.map((item: any) => item.value);
return result;
}
4. 小華寫了以下 TypeScript 程式碼，但在編譯時出現了錯誤。最可能的原因是什麼？ 錯誤診斷
interface User {
name: string;
age: number;
}
const user: User = {
name: “Alice”,
age: 25,
email: “alice@example.com” // 編譯錯誤！
};
5. 小明想在瀏覽器中直接引用他寫的 TypeScript 檔案，但頁面完全沒有反應。他的 HTML 如下，問題出在哪裡？ 錯誤診斷
<!DOCTYPE html>
<html>
<body>
<h1>My App</h1>
<script src=”app.ts”></script>
</body>
</html>