• 陣列 (Array)

陣列是一個包含元素的有序集合，元素可以是 相同型別 或 不同型別。在 TypeScript 中，我們可以使用 型別註記法 (型別[]) 或 泛型法 (Array<型別>) 來聲明陣列型別，就看個人或團隊喜歡使用哪一種寫法。

// 字串型別陣列

const stringArr1: string[] = ["A", "B", "C"]; // 型別註記法
const stringArr2: Array<string> = ["A", "B", "C"]; // 泛型法

// 數字型別陣列

const numberArr1: number[] = [1, 2, 3, 4, 5]; // 型別註記法
const numberArr2: Array<number> = [1, 2, 3, 4, 5]; // 泛型法

// 聯合類型陣列

const unionArray1: (string | number)[] = [1, "Hello", 2, 3, 6, "威爾豬"]; // 型別註記法
const unionArray2: Array<string | number> = [1, "Hello", 2, 3, 6, "威爾豬"]; // 泛型法

以上每組的範例兩者都是相同的，兩種寫法都有人寫，威爾豬習慣使用型別註記法，畢竟可以少打一些字。

接下來，我們可以思考一下，那陣列裡面有子陣列該如何撰寫呢？

其實也很簡單 [][] 就搞定了：

// 子陣列是陣列

const stringArrayOfSun: string[][] = [["A", "B", "C"], ["D", "E", "F"]];
const numberArrayOfSun: number[][] = [[1, 2, 3], [4, 5, 6]];
const unionArrayOfSun: (string | number)[][] = [[1, ,5, 2], [ 3, "Hello", 6, "威爾豬"]];

// 子陣列是物件

const arrayOfObjects: { name: string; age: number }[][] = [
  [
    { name: "威爾豬", age: 3 },
    { name: "威爾羊", age: 5 },
  ],
  [
    { name: "威爾牛", age: 2 },
    { name: "威爾馬", age: 4 },
  ],
];

當然 宣告後有賦值，就可以和基本類型一樣，讓 TypeScript 自行判斷。

const numberArr = [1, 2, 3, 4, 5]; // 自動判斷為 number[]
const unionArray = [1, "Hello", 2, 3, 6, "威爾豬"]; // 自動判斷為 (string | number)[]
const stringArrayOfSun = [["A", "B", "C"], ["D", "E", "F"]]; // 自動判斷為 string[][]

不過如果是空陣列，還是最好設定什麼型別的空陣列，不然也會和基本數據一樣，TypeScript 將自動判定為 any 型別的陣列 (any[])。

// 要宣告是什麼類型的空陣列

const emptyArray1: number[] = [];
const emptyArray2: Array<number> = [];
const emptyArray3: string[][] = [];

• 元組 (Tuple)

元組是過去在學 JavaScript 沒聽過的名詞，是 TypeScript 引入的概念之一，它算是一種特殊陣列，類似聯合型別 但 只能用於陣列上，而且必須是用於 長度固定的陣列，且元組的元素具有 固定的順序 和 固定的型別。

我們看以下範例：

const person1: [string, number] = ["威爾豬", 3];
const person2: [string, number] = [3, "威爾豬"]; // ❌ 錯誤： 型別和值需保持一至

// 假定 nums 數字陣列只能有 2 個值

const nums1: [number, number] = [3, 5];
const nums2: [number, number] = [2, true]; // ❌ 錯誤： 類型 'boolean' 不可指派給類型 'number'。

元組的操作和陣列一樣，可以通過索引值來獲取或修改該元素的值：

const person: [string, number] = ["威爾豬", 3];

console.log(person[0]); // 輸出："威爾豬"
console.log(person[1]); // 輸出：3

person[1] = 5; // 修改元組的第二個元素
console.log(person); // 輸出：["威爾豬", 5]

一定要特別注意，元組的長度是固定不變的，不能隨意添加或刪除元素。陣列和元組的元素型別在初始化時已經確定，也不能隨意更改。

// 陣列

const numbers: number[] = [1, 2, 3, 4, 5];
numbers[0] = "1"; // ❌ 錯誤，不能將字串賦值給 number 型別的陣列元素

// 元祖

const person: [string, number] = ["威爾豬", 3];
person[1] = "5"; // ❌ 錯誤，不能將字串賦值給 number 型別的元組元素

總結來說，元組就是固定長度的陣列，且型別和值必須相互對應，通過正確使用索引、陣列方法和解構賦值等技巧，我們可以更有效地處理程式中列表和集合的數據。