Skip to main content

Objects, Arrays and Tuples

物件 Object​

物件是一種表示 key-value pair 的資料結構。在 TypeScript 中，可以使用介面（interface）或類別（class）來定義物件的型別。以下是不同方式定義物件型別的示例：

// 可以匿名定義型別
function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}

// 也可以透過 interface 定義
interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  return "Hello " + person.name;
}

// 或透過 type 定義
type Person = {
  name: string;
  age: number;
};

function greet(person: Person) {
  return "Hello " + person.name;
}

索引簽名 Index signatures​

在 TypeScript 中，通常物件的屬性名稱必須在介面（interface）或類別（class）中被事先定義，但在某些情況下，希望能夠以動態方式添加屬性，這時就可以使用索引簽名。

索引簽名的特點包括：

  • 定義方式：用中括號 [] 定義在介面或類別中，並指定鍵的型別(通常是字串或數字)。
  • 動態屬性：通過索引簽名，可以以動態方式添加新的屬性到物件中，而這些屬性的名稱必須符合索引簽名指定的鍵型別。
  • 值的型別: 索引簽名還指定了對應鍵的值的型別，這意味著無論添加的屬性名是什麼，其值必須符合索引簽名所規定的型別。
interface MyDictionary {
  [key: string]: number;
}

const myData: MyDictionary = {
  apples: 10,
  bananas: 5,
  oranges: 8,
};

在上面的程式碼中，MyDictionary 採用了索引簽名，它定義了對應 key 的型別為字串，並指定了值的型別為數字。這使我們能夠動態增加像 "apples"、"bananas" 和 "oranges" 這樣的屬性到 myData 物件中。

Array 陣列​

陣列是一種有序的資料結構，它包含一系列的值。在 TypeScript 中，可以使用不同方式來表示陣列的型別。

使用 number[] 或 Array<number>​

可以使用 number[] 或 Array<number> 來表示包含數字的陣列：

let numbers: number[] = [1, 2, 3, 4, 5];
let otherNumbers: Array<number> = [6, 7, 8, 9, 10];

使用聯合型別​

如果陣列中的元素可以是多種型別，可以使用聯合型別，例如 (number | string)[] 表示可以包含數字和字串的陣列：

let mixedArray: (number | string)[] = [1, "two", 3, "four"];

readonly array​

可以將陣列設為 readonly，這樣就無法修改陣列中的元素

let readOnlyNumbers: readonly number[] = [1, 2, 3];
// 下面的操作將會報錯
readOnlyNumbers.push(4);
readOnlyNumbers[0] = 10;

使用 as const​

另一種方式是在定義陣列時加上 as const，這樣陣列會變成具有常數值的 readonly 陣列：

let constantArray = [1, 2, 3] as const;
// 下面的操作將會報錯
constantArray.push(4);
constantArray[0] = 10;

這樣的表示方式可以確保陣列中的值在宣告後不會被修改

Tuple 元組​

Tuple 是一種特殊的陣列，它有固定長度和每個元素都有特定的型別。每個元素在元組中的位置具有特殊的意義或約定。

定義 Tuple​

let myCar: [number, string, string] = [2002, "Toyota", "Corolla"];

上述的 myCar 是一個元組，它包含三個元素，分別是一個數字、一個字串和一個字串。這代表第一個元素必須是數字，第二和第三個元素必須是字串。

存取 Tuple 中的元素​

可以使用陣列索引的方式存取 Tuple 中的元素，例如：

const year = myCar[0]; // 取得年份
const make = myCar[1]; // 取得製造商
const model = myCar[2]; // 取得車型

解構 Tuple​

另一種存取 Tuple 中的元素的方式是使用解構（Destructuring）：

const [year, make, model] = myCar;

readonly tuple​

如果希望完全限制對 Tuple 的操作，可以使用 readonly Tuple：

const roNumPair: readonly [number, number] = [4, 5];

// 錯誤: 'push' 屬性不存在於 'readonly [number, number]' 型別
roNumPair.push(6);

// 使用 `as const` 也可以達到相似的效果
const roNumPair = [4, 5] as const;

參考資料​