深入了解 TypeScript 中的對象類型

一、基本概念

在 TypeScript 中，對象類型可以通過字面量表示法來定義一個對象。字面量表示法可以定義一個對象的屬性名和屬性值，然後將其放在一對花括號中，以表示一個對象。

{
    name: string,
    age: number,
    phone?: string
}

此處定義了一個對象類型，它包含三個屬性：name、age 和 phone，其中 phone 屬性是可選屬性，表示該屬性可以存在也可以不存在。

對象類型還可以使用接口（interface）或類型別名（type）來定義：

interface Person {
    name: string,
    age: number,
    phone?: string
}
type PersonAgain {
    name: string,
    age: number,
    phone?: string
}

這裡以接口為例，定義了一個名為 Person 的接口，其屬性與上面的字面量表示法一致。

二、屬性修飾符

在對象類型中，屬性可以具有以下修飾符：

• readonly：表示該屬性只讀（不可修改）
• public：表示該屬性是公共屬性（默認值，可以在任何地方訪問）
• private：表示該屬性是私有屬性（只能在類內部訪問）
• protected：表示該屬性是受保護屬性（只能在基類或其子類內部訪問）

示例代碼如下：

interface Point {
    readonly x: number,
    readonly y: number,
    z?: number
}

class PointThreeD implements Point {
    readonly x: number;
    readonly y: number;
    readonly z: number;

    constructor(x: number, y: number, z: number) {
        this.x = x;
        this.y = y;
        this.z = z;
    }
}

let p3d = new PointThreeD(1, 2, 3);
console.log(p3d.x); // 輸出 1
p3d.x = 4; // 報錯，屬性 'x' 只讀

在這個例子中，定義了一個名為 Point 的接口，它包含兩個只讀屬性：x 和 y，以及一個可選屬性 z。並且還定義了一個名為 PointThreeD 的類，該類對接口 Point 進行實現，並在構造函數中為所有屬性賦值。p3d 為 PointThreeD 類型的一個實例，可以訪問其屬性 x、y 和 z（只有 PointThreeD 類型才有 z 屬性）。

三、鍵名簽名

在 TypeScript 中，對象類型還可以使用鍵名簽名來定義一系列屬性。鍵名簽名包含兩個部分：鍵名類型和鍵值類型。

interface Dict {
  [key: string]: string;
}

let dict: Dict = {
  name: 'Tom',
  age: '18',
  phone: '1234567890'
};

在這個例子中，定義了一個名為 Dict 的接口，它包含一個鍵名為 string 類型、鍵值為 string 類型的鍵名簽名。dict 為 Dict 類型的一個實例，可以訪問其所有鍵值。

四、交叉類型

交叉類型（Intersection Types）表示多個類型的交集。通過交叉類型，我們可以將多個對象類型合併成一個對象類型。

interface User {
  name: string;
  age: number;
}
interface UserInfo {
  city: string;
  occupation: string;
}
type UserAndInfo = User & UserInfo;

let user: UserAndInfo = {
  name: 'Tom',
  age: 18,
  city: 'Beijing',
  occupation: 'Engineer'
}

在這個例子中，定義了兩個接口 User 和 UserInfo，它們分別定義了用戶和用戶信息的屬性。接着定義了一個名為 UserAndInfo 的類型別名，它是 User 類型和 UserInfo 類型的交集。最後定義了一個 user 對象為 UserAndInfo 類型，可以訪問其屬性 name、age、city 和 occupation。

五、聯合類型

聯合類型（Union Types）表示多個類型的並集。通過聯合類型，我們可以將多種不同對象類型合併成一個對象類型。

interface Cat {
    type: 'cat',
    name: string,
    sound: string
}

interface Dog {
    type: 'dog',
    name: string,
    sound: string
}

type CatAndDog = Cat | Dog;

function playSound(animal: CatAndDog) {
    console.log(animal.sound);
}

let cat = { type: 'cat', name: 'Tom', sound: 'Meow' };
let dog = { type: 'dog', name: 'Jerry', sound: 'Bark' };

playSound(cat); // 輸出 'Meow'
playSound(dog); // 輸出 'Bark'

在這個例子中，定義了兩個接口 Cat 和 Dog，它們分別定義了貓和狗的屬性。接着定義了一個名為 CatAndDog 的聯合類型，它是 Cat 類型和 Dog 類型的並集。最後定義了一個 playSound 函數，該函數的參數 animal 可以是 CatAndDog 類型，然後在函數體內輸出 animal 的聲音。

六、索引類型

索引類型（Index Types）允許我們動態地訪問和操作對象的屬性。在 TypeScript 中，索引類型有兩種：字符串索引和數字索引。

字符串索引允許我們使用字符串來訪問對象的屬性：

interface Dict {
  [key: string]: string;
}
let dict: Dict = {};
dict['name'] = 'Tom';
dict['age'] = '18';

在這個例子中，定義了一個名為 Dict 的接口，它包含一個字符串索引，其鍵類型為 string，值類型為 string。然後定義了一個 dict 對象為 Dict 類型，可以動態地向 dict 對象中添加屬性和屬性值。

數字索引允許我們使用數字來訪問對象的屬性：

interface NumberArray {
    [index: number]: number;
}
let arr: NumberArray = [1, 2, 3];
let num: number = arr[0];

在這個例子中，定義了一個名為 NumberArray 的接口，它包含一個數字索引，其鍵類型為 number，值類型為 number。然後定義了一個 arr 對象為 NumberArray 類型，可以動態地添加數字類型的屬性和屬性值。

七、總結

在 TypeScript 中，對象類型是一個非常重要的概念。通過對象類型的深入了解，我們可以更好地理解 TypeScript 語法，從而提高我們的編程效率。