泛型（Generics）what why when【前端TS】

最新推荐文章于 2025-11-23 23:13:13 发布

原创最新推荐文章于 2025-11-23 23:13:13 发布 · 517 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端

TypeScript 专栏收录该内容

7 篇文章

订阅专栏

我总是提醒自己一定要严谨严谨严谨

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 等

泛型 = 参数化的类型