測驗：TypeScript 基本型別標註
共 5 題，點選答案後會立即顯示結果
1. 在 TypeScript 中，number 型別可以存放哪些值？
2. 以下哪種情況，TypeScript 可以自動推斷變數型別，不需要手動寫型別標註？
3. string[] 和 Array<string> 這兩種寫法有什麼差別？
4. 看到以下函式定義，哪一段白話翻譯最正確？
5. AI 產生了以下程式碼，編輯器顯示錯誤訊息：Type 'number' is not assignable to type 'string'。這代表什麼？
一句話說明
型別標註告訴 TypeScript「這個變數應該放什麼類型的資料」，寫錯就會提早報錯。
為什麼要看懂型別標註？
當你請 AI 幫你寫 TypeScript，幾乎每一行都會出現 : string、: number 這類標記。看不懂它們，就無法確認 AI 寫的東西是不是你要的。
好消息是：基本型別標註非常直覺，花五分鐘就能全部看懂。
最小範例
let name: string = "Alice";
let age: number = 25;
let active: boolean = true;
Code language: JavaScript (javascript)就這樣。冒號後面的就是「型別標註」，告訴 TypeScript 這個變數只能放這種資料。
逐行翻譯：基本型別
let name: string = "Alice"; // name 是文字，目前的值是 "Alice"
let age: number = 25; // age 是數字，目前的值是 25
let active: boolean = true; // active 是布林值（true 或 false）
Code language: JavaScript (javascript)翻譯成白話：
「建立一個叫 name 的變數，它的型別是 string（文字），初始值是 “Alice”。」
必看懂：三大基本型別
型別
意思
可以放什麼
範例
string | 文字 | 任何文字 | "hello"、'world'、` hi ${name} |
| number | 數字 | 整數、小數都算 | 42、3.14、-1 |
| boolean | 布林值 | 只有兩種值 | true、false |
重點：TypeScript 的 number 不分整數和小數，全都是 number。
---
## 型別推論：不寫標註也行
TypeScript 其實很聰明。你給它初始值，它自己就能推斷型別：
%%CODEBLOCK1daebc84e2f94a75bd7b421f5f84f742%%
**這在幹嘛**：這叫「型別推論」（type inference）。你沒寫 : string，但 TypeScript 看到 “Alice” 就知道是 string。
### 那什麼時候要寫、什麼時候不用寫？
%%CODEBLOCK933fb96e84b54d20819e0a742d3bed28%%
**Vibe Coder 小結**：AI 生成的程式碼裡，有些變數有寫標註、有些沒寫，這是正常的。有初始值的地方通常會省略，函式參數幾乎都會寫。
---
## 陣列型別：兩種寫法，同一件事
AI 生成的程式碼裡，你會看到兩種陣列型別的寫法：
%%CODEBLOCKfccc9bf783924fd79e19ba4697c9ede3%%
### 逐行翻譯
%%CODEBLOCK53c25e9da18e457d8633d76ef8a44bf4%%
翻譯成白話：
> 「names 是一個陣列，裡面每個元素都必須是 string。」
### 兩種寫法的對照
| 寫法 1 | 寫法 2 | 翻譯 |
|--------|--------|------|
| string[] | Array | 文字陣列 |
| number[] | Array | 數字陣列 |
| boolean[] | Array | 布林值陣列 |
兩種寫法功能完全一樣，只是風格不同。AI 比較常用 string[] 這種簡短寫法。
---
## any 型別：逃生口，但要小心
%%CODEBLOCK0058dc11cb174b2ebc77ae9a97f2a239%%
**這在幹嘛**：any 是「什麼型別都行」的意思。TypeScript 不會檢查它，等於暫時關掉型別保護。
### 什麼時候會看到 any？
%%CODEBLOCKe96d64f69edc4d4ba7bd1c6c195334f7%%
### 必看懂：any 的風險
%%CODEBLOCKb39dffe575184556a6539517f3c79b53%%
用了 any，TypeScript 就不會幫你抓錯。等於你花力氣用 TypeScript，卻把保護關掉了。
> 看到 AI 寫了 any，可以問它：「能不能用更精確的型別？」
---
## 函式參數與回傳值的型別標註
這是 AI 生成程式碼中最常見的型別標註場景：
### 最小範例
%%CODEBLOCK4407aa8850324a25bc5b4bf8d072802d%%
**翻譯**：「greet 函式接收一個文字參數 name，回傳一個文字。」
### 常見變化
**變化 1：箭頭函式**
%%CODEBLOCK77dc650dbf044e79850042933e8c0978%%
**翻譯**：跟上面一模一樣，只是用箭頭函式的寫法。
**變化 2：多個參數**
%%CODEBLOCK65754d5e3b2c467fbf67d86d6f83593b%%
**翻譯**：「接收兩個數字 a 和 b，回傳一個數字（它們的和）。」
**變化 3：不回傳東西**
%%CODEBLOCK78e17fc6c69642a8b2ef27569bec24dd%%
**翻譯**：「接收一個文字 message，不回傳任何東西。void 就是『沒有回傳值』的意思。」
**變化 4：可選參數**
%%CODEBLOCK5554bf56ab92419ea7045247a7554a57%%
**翻譯**：「name 一定要傳，greeting 可傳可不傳。沒傳就用預設值 "Hello"。」
### 回傳型別通常可以省略
%%CODEBLOCK84c3d749c74b4154af78794fcb545bb6%%
兩種都正確。AI 有時候會寫、有時候省略，都是正常的。
---
## 型別錯誤怎麼讀
當你在 AI 幫你寫的程式碼中看到紅色底線或錯誤訊息，先別慌。大部分型別錯誤都是同一種模式：
### 最常見的錯誤訊息
**錯誤 1：型別不匹配**
%%CODEBLOCKfdeaf30c151a44c2a02bb9dda72b9aed%%
翻譯：「你把數字塞進了一個應該放文字的地方。」
%%CODEBLOCKa7e18c203e7c4c50ae754ec0e7c68f69%%
**錯誤 2：缺少屬性**
%%CODEBLOCKf33e074a1f314fb0a06da8aae4462232%%
翻譯：「這裡需要有 email 欄位，但你沒給。」
**錯誤 3：參數型別錯誤**
%%CODEBLOCKab4fc86e761647888d9439fe02443bbc%%
翻譯：「這個函式要的是數字，你傳了文字進去。」
### 讀錯誤訊息的公式
TypeScript 的錯誤訊息幾乎都是這個格式：
%%CODEBLOCK6ac41ab49a5a4d69b1dbc6121eec76ac%%
翻譯公式：**「你給了 A，但這裡需要 B。」**
記住這個公式，九成的型別錯誤訊息你都能看懂。
---
## 完整範例：把所有概念串起來
下面這段程式碼可能是 AI 幫你寫出來的，現在你應該每一行都看得懂了：
%%CODEBLOCKe0aa2ac4a8a141f0bdd97db45c27159b%%
---
## 必看懂 vs 知道就好
### 必看懂（天天會遇到）
- : string、: number、: boolean -- 基本型別標註
- string[]、number[] -- 陣列型別
- 函式的 (param: type): returnType -- 參數和回傳型別
- ? 可選參數和 void 無回傳值
### 知道就好（遇到再查）
- Array -- 陣列的另一種寫法，跟 string[] 一樣
- any -- 逃生口，看到就留意
- 型別推論 -- TypeScript 會自動推斷，不用每次都手寫
---
## Vibe Coder 檢查點
看到 AI 寫的 TypeScript 程式碼時確認：
- [ ] 函式參數有沒有型別標註？（沒有可能導致 any）
- [ ] 有沒有用 any？（如果有，問 AI 能不能用更精確的型別）
- [ ] 陣列型別對嗎？（string[]` 裡面應該都是文字）
- [ ] 型別錯誤訊息看得懂嗎？（記住公式：「你給了 A，但這裡需要 B」）
進階測驗：TypeScript 基本型別標註
共 5 題，包含情境題與錯誤診斷題。