TypeScript語法之類型操作實例代碼分析

TypeScript語法之類型操作實例代碼分析

TypeScript 是一種由微軟開發的開源編程語言，它是 JavaScript 的一個超集，添加了可選的靜態類型和基于類的面向對象編程。TypeScript 的類型系統非常強大，允許開發者通過類型操作來創建復雜的類型定義。本文將深入探討 TypeScript 中的類型操作，并通過實例代碼進行分析。

1. 類型別名與接口

1.1 類型別名

類型別名允許你為任何類型創建一個新的名稱。它使用 type 關鍵字來定義。

type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
    console.log(`ID: ${id}`);
}

printId(101); // 輸出: ID: 101
printId("202"); // 輸出: ID: 202

在上面的例子中，StringOrNumber 是一個類型別名，它表示 string 或 number 類型。printId 函數接受一個 StringOrNumber 類型的參數。

1.2 接口

接口是 TypeScript 中定義對象類型的一種方式。它使用 interface 關鍵字來定義。

interface Person {
    name: string;
    age: number;
}

function greet(person: Person) {
    console.log(`Hello, ${person.name}`);
}

const john: Person = { name: "John", age: 30 };
greet(john); // 輸出: Hello, John

在這個例子中，Person 接口定義了一個具有 name 和 age 屬性的對象類型。greet 函數接受一個 Person 類型的參數。

1.3 類型別名與接口的區別

• 擴展性：接口可以通過 extends 關鍵字進行擴展，而類型別名則不能。
• 合并：接口可以合并，即多個同名的接口會自動合并為一個接口，而類型別名則不能合并。

interface Animal {
    name: string;
}

interface Dog extends Animal {
    breed: string;
}

const myDog: Dog = { name: "Rex", breed: "German Shepherd" };

2. 聯合類型與交叉類型

2.1 聯合類型

聯合類型表示一個值可以是幾種類型之一。它使用 | 符號來定義。

type StringOrNumber = string | number;

function printValue(value: StringOrNumber) {
    console.log(`Value: ${value}`);
}

printValue("Hello"); // 輸出: Value: Hello
printValue(42); // 輸出: Value: 42

在這個例子中，StringOrNumber 是一個聯合類型，表示 value 可以是 string 或 number 類型。

2.2 交叉類型

交叉類型表示一個值必須同時滿足多個類型的條件。它使用 & 符號來定義。

interface Person {
    name: string;
}

interface Employee {
    employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = { name: "John", employeeId: 123 };

在這個例子中，EmployeePerson 是一個交叉類型，表示 john 必須同時滿足 Person 和 Employee 接口的條件。

3. 類型保護與類型斷言

3.1 類型保護

類型保護是 TypeScript 中的一種機制，用于在運行時檢查變量的類型。常見的類型保護方式包括 typeof、instanceof 和用戶自定義的類型保護函數。

function printValue(value: string | number) {
    if (typeof value === "string") {
        console.log(`String value: ${value}`);
    } else {
        console.log(`Number value: ${value}`);
    }
}

printValue("Hello"); // 輸出: String value: Hello
printValue(42); // 輸出: Number value: 42

在這個例子中，typeof 用于檢查 value 的類型，并根據類型執行不同的邏輯。

3.2 類型斷言

類型斷言允許你手動指定一個值的類型。它使用 as 關鍵字或尖括號語法。

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
// 或者
let strLength2: number = (<string>someValue).length;

在這個例子中，someValue 被斷言為 string 類型，以便訪問 length 屬性。

4. 映射類型與條件類型

4.1 映射類型

映射類型允許你基于現有類型創建新的類型。它使用 in 關鍵字來遍歷現有類型的屬性。

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface Person {
    name: string;
    age: number;
}

type ReadonlyPerson = Readonly<Person>;

const john: ReadonlyPerson = { name: "John", age: 30 };
// john.name = "Jane"; // 錯誤: 無法分配到 "name" ，因為它是只讀屬性

在這個例子中，Readonly 是一個映射類型，它將 Person 接口的所有屬性變為只讀。

4.2 條件類型

條件類型允許你根據條件選擇類型。它使用 extends 關鍵字來定義條件。

type NonNullable<T> = T extends null | undefined ? never : T;

type T1 = NonNullable<string | number | null>; // string | number
type T2 = NonNullable<string | null | undefined>; // string

在這個例子中，NonNullable 是一個條件類型，它排除了 null 和 undefined 類型。

5. 類型推斷與類型守衛

5.1 類型推斷

TypeScript 能夠根據上下文自動推斷變量的類型。

let x = 3; // TypeScript 推斷 x 為 number 類型
let y = "Hello"; // TypeScript 推斷 y 為 string 類型

在這個例子中，TypeScript 根據賦值的值自動推斷出 x 和 y 的類型。

5.2 類型守衛

類型守衛是一種在運行時檢查類型的方式，通常用于聯合類型。

function isString(value: any): value is string {
    return typeof value === "string";
}

function printValue(value: string | number) {
    if (isString(value)) {
        console.log(`String value: ${value}`);
    } else {
        console.log(`Number value: ${value}`);
    }
}

printValue("Hello"); // 輸出: String value: Hello
printValue(42); // 輸出: Number value: 42

在這個例子中，isString 是一個類型守衛函數，用于檢查 value 是否為 string 類型。

6. 類型操作的高級應用

6.1 類型遞歸

類型遞歸允許你在類型定義中引用自身。

type TreeNode = {
    value: number;
    left?: TreeNode;
    right?: TreeNode;
};

const tree: TreeNode = {
    value: 1,
    left: {
        value: 2,
        left: { value: 4 },
        right: { value: 5 }
    },
    right: {
        value: 3,
        left: { value: 6 },
        right: { value: 7 }
    }
};

在這個例子中，TreeNode 是一個遞歸類型，表示一個二叉樹節點。

6.2 類型模板字面量

類型模板字面量允許你基于字符串字面量類型創建新的類型。

type EventName = `on${Capitalize<string>}`;

const clickEvent: EventName = "onClick";
const hoverEvent: EventName = "onHover";

在這個例子中，EventName 是一個類型模板字面量，表示以 on 開頭的字符串類型。

7. 總結

TypeScript 的類型系統非常強大，提供了豐富的類型操作工具。通過類型別名、接口、聯合類型、交叉類型、類型保護、類型斷言、映射類型、條件類型、類型推斷、類型守衛、類型遞歸和類型模板字面量等特性，開發者可以創建出復雜且靈活的類型定義。這些特性不僅提高了代碼的可讀性和可維護性，還增強了類型安全性，減少了運行時錯誤的可能性。

通過本文的實例代碼分析，希望讀者能夠更好地理解和掌握 TypeScript 中的類型操作，從而在實際開發中更加得心應手。