TypeScript泛型的使用

TypeScript（TS）是一種靜態型別的超集合語言，旨在增強 JavaScript 的可維護性和可讀性。在 TS 中，泛型（Generics） 是一個強大而靈活的特性，允許我們在編寫函數、類別或接口時，不必預先定義型別，而是將型別作為參數來使用，進而實現更加靈活和可重用的代碼結構。

什麼是泛型？

泛型可以理解為「型別變數」，它允許開發者在編寫代碼時不指定具體型別，而是在使用時再決定具體型別。這使得代碼能適應更多場景，而不失去型別檢查的優勢。

泛型的基本語法

泛型使用尖括號 <T> 來表示，其中 T 是型別參數的名稱，可以是任何有效的標識符。

1
2
3

function identity<T>(value: T): T {
  return value;
}

使用泛型函數

在上述範例中，我們定義了一個泛型函數 identity，它接收任意型別的值並返回相同型別的值。使用時可以顯式地指定型別，或讓編譯器自動推斷。

// 顯式指定型別
const result1 = identity<string>("Hello, TypeScript"); // result1: string

// 型別推斷
const result2 = identity(123); // result2: number

泛型的應用場景

1. 泛型與陣列

我們可以用泛型來確保陣列中所有元素具有相同型別。

function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

const firstNumber = getFirstElement([1, 2, 3]); // firstNumber: number
const firstString = getFirstElement(["a", "b", "c"]); // firstString: string

2. 泛型與類別

泛型可以用於類別來定義靈活的資料結構。例如，一個通用的堆疊類別。

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const numberStack = new Stack<number>();
numberStack.push(10);
console.log(numberStack.pop()); // 10

3. 泛型與接口

泛型可以幫助接口適應多種型別場景。

interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

const pair: KeyValuePair<string, number> = {
  key: "age",
  value: 30,
};

4. 泛型約束

有時候我們希望泛型不只是「任意型別」，而是需要滿足某些條件。這可以通過 extends 關鍵字來實現。

function logProperty<T extends { name: string }>(obj: T): void {
  console.log(obj.name);
}

logProperty({ name: "Alice", age: 25 }); // Alice
// logProperty(123); // 錯誤，123 不符合約束

泛型 vs `any`

很多開發者可能會想：「為什麼要使用泛型？直接使用 any 不是更簡單嗎？」

泛型與 any 都能處理多種型別，但它們有本質上的區別:

`any` 的特性

靈活但無約束：any 允許任何型別的值，但在編譯階段不進行型別檢查。
可能導致型別安全問題：any 使得編譯器無法提供錯誤提示，容易引發運行時錯誤。

範例:

function processValue(value: any): any {
  return value;
}

const result = processValue(123); // result: any
result.toUpperCase(); // 運行時錯誤，因為數字沒有 toUpperCase 方法

泛型的特性

靈活且安全：泛型在保證靈活性的同時，仍然保留了型別檢查。
提升代碼可讀性：泛型讓函數或類別的型別關係更加明確。

範例：

function processValue<T>(value: T): T {
  return value;
}

const result = processValue(123); // result: number
// result.toUpperCase(); // 編譯錯誤，避免了運行時錯誤

比較表

特性	any	泛型 (T)
靈活性	高	高
型別安全性	無	有
編譯階段檢查	無	有
可讀性	可能模糊	清晰，與業務邏輯緊密相關
適用場景	型別未知的臨時解決方案	可重用的泛型結構

何時使用泛型而不是 any

當你需要在函數內部使用參數的特定方法或屬性時
當你需要確保函數的返回值類型與輸入參數類型相關時
當你需要在編譯時捕獲可能的型別錯誤時

// 好的實踐：使用泛型
function firstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

// 不好的實踐：使用 any
function firstElementAny(arr: any[]): any {
    return arr[0];
}

// 使用泛型的好處
const numbers = [1, 2, 3];
const firstNumber = firstElement(numbers);    // TypeScript 知道這是 number 類型
const strings = ["a", "b", "c"];
const firstString = firstElement(strings);    // TypeScript 知道這是 string 類型

// 使用 any 的問題
const firstAny = firstElementAny(numbers);    // TypeScript 不知道具體類型
const len: number = firstAny.length;          // 不會報錯，但可能在運行時出錯

實際應用場景

1. API 響應處理

interface ApiResponse<T> {
    data: T;
    status: number;
    message: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
    const response = await fetch(url);
    return response.json();
}

// 使用例子
interface User {
    id: number;
    name: string;
}

const user = await fetchData<User>('/api/user/1');

2. 狀態管理

class State<T> {
    private value: T;

    constructor(initialValue: T) {
        this.value = initialValue;
    }

    getValue(): T {
        return this.value;
    }

    setValue(newValue: T): void {
        this.value = newValue;
    }
}

const numberState = new State<number>(0);
const stringState = new State<string>("");