1. 陣列型別的兩種寫法

TypeScript 陣列有兩種常見寫法：

let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b", "c"];

小提醒：number[] 比 Array 簡短，實務上更常用。

但在泛型（例如 Promise<Array<string>>）裡，Array<T> 會更直覺。

2. 陣列可以很嚴格

TS 不只是限制元素型別，連奇怪的操作都會幫你擋下來：

let fruits: string[] = ["apple", "banana"];
fruits.push("mango"); // ✅ OK
fruits.push(123);     // ❌ Type 'number' is not assignable to type 'string'.

這就是 TS 的「防呆」魅力。

3. 陣列的進階玩法

(1) 陣列中的聯合型別

let mixed: (string | number)[] = ["a", 1, "b", 2];

👉 陣列元素可以是 多種型別。

(2) 多維陣列

let matrix: number[][] = [
  [1, 2],
  [3, 4],
];

👉 型別要多加一層 []，代表「陣列的陣列」。

4. Tuple（元組）是什麼？

Tuple 就是「長度固定、位置固定型別的陣列」。

例如，要儲存經緯度座標：

let point: [number, number] = [25.0330, 121.5654];

如果用普通陣列：

let pointArr: number[] = [25.0330, 121.5654];
// 看不出來一定要兩個，可能寫成 [25.0330] 也不會報錯

5. Tuple 的實用場景

• API 回傳固定格式

  例如 [statusCode, message]

• 函式多回傳值

• 資料對應（例如 [key, value]）

function useFetch(): [boolean, string] {
  let loading = true;
  let data = "Hello";
  return [loading, data];
}

const [loading, data] = useFetch();

6. 可選與剩餘元素

Tuple 還能用可選項目（?）或剩餘元素（...）：

let optionalTuple: [string, number?] = ["Marco"];
optionalTuple = ["Marco", 30]; // ✅ OK

let restTuple: [string, ...number[]] = ["scores", 100, 90, 80];

👉 這讓 Tuple 更靈活，既能嚴格又能彈性。

7. 常見陷阱

1. Tuple 其實還是陣列

   • 雖然 TS 檢查長度與型別，但在 JS 執行時還是一般陣列。
   • 例如：point.push(999) 在 TS 可能會報錯，但執行後還是會加進去。

2. readonly 陣列

   • 如果你不希望陣列被改動，可以加上 readonly：

   let roles: readonly string[] = ["admin", "user"];
   roles.push("guest"); // ❌ Property 'push' does not exist on type 'readonly string[]'
   
   

3. 陣列型別預設過寬

   • let arr = []; 預設會是 any[]，要小心。

8. 小練習 🎯

1. 建立一個 string[] 陣列，存放三個朋友的名字。
2. 建立一個 (string | number)[] 陣列，可以同時放字串與數字。
3. 定義一個 Tuple [string, number, boolean]，代表「名字、年齡、是否為 VIP」。
4. 寫一個函式 useCounter，回傳 [number, () => void]，分別代表目前計數與一個加一的函式。

9. 明天預告

今天我們學會了 陣列與 Tuple，

明天要進一步學 物件型別：

• 怎麼定義一個物件結構
• type 與 interface 的差別
• 可選屬性與唯讀屬性