我總是提醒自己一定要嚴謹嚴謹嚴謹

TypeScript 泛型 (Generics)

1. 什么是泛型？

泛型是一種在定義函數、類、接口時不預先指定具體類型，而在使用時再指定類型的機制。

作用：

• 提高代碼復用性
• 保持類型安全

2. 為什么需要泛型？

示例：沒有泛型的函數

function identity(arg: any): any {return arg;
}

問題：類型丟失（返回值是 any），類型不安全

使用泛型：

function identity<T>(arg: T): T {return arg;
}const num = identity<number>(123); // 類型推斷為 number
const str = identity("hello");     // 類型推斷為 string

3. 泛型常見用法

3.1 函數泛型

function getFirst<T>(arr: T[]): T {return arr[0];
}const firstNum = getFirst<number>([1, 2, 3]); // number
const firstStr = getFirst(["a", "b", "c"]);   // string（類型推斷）

3.2 接口泛型

interface ApiResponse<T> {code: number;data: T;message: string;
}const userResponse: ApiResponse<{ id: number; name: string }> = {code: 200,data: { id: 1, name: "Alice" },message: "success"
};

3.3 類泛型

class Stack<T> {private items: T[] = [];push(item: T) {this.items.push(item);}pop(): T | undefined {return this.items.pop();}
}const numberStack = new Stack<number>();
numberStack.push(1);const strStack = new Stack<string>();
strStack.push("a");

3.4 泛型約束

interface HasLength {length: number;
}function logLength<T extends HasLength>(arg: T): T {console.log(arg.length);return arg;
}logLength("hello");      // ? 字符串有 length
logLength([1, 2, 3]);    // ? 數組有 length
// logLength(123);       // ? number 沒有 length

3.5 泛型默認值

function getValue<T = string>(value: T): T {return value;
}const v1 = getValue(123);       // 推斷為 number
const v2 = getValue(undefined); // 默認類型 string

說明：

• 如果傳入值能推斷類型，則用推斷類型
• 如果無法推斷，則使用泛型默認值

3.6 多個泛型參數

function mapPair<K, V>(key: K, value: V): [K, V] {return [key, value];
}const pair = mapPair("id", 123); // [string, number]

4. 泛型應用場景

• 集合類：如 Stack、Queue、Map 等
• 工具函數：如 identity、getFirst、mergeObjects
• 接口/類型定義：API 返回數據結構復用
• React / Vue Hooks：如 useState、ref
• 第三方庫：如 Lodash、Axios 等

泛型 = 參數化的類型