什么是泛型，如何使用它？

原创于 2025-06-14 13:34:38 发布 · 504 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端

泛型（Generics）是什么？

泛型是TypeScript中一种创建可复用、类型安全组件的工具，它允许你在定义函数、接口或类时不预先指定具体类型，而是在使用时再指定类型参数。这解决了代码复用与类型安全之间的矛盾。

为什么需要泛型？

没有泛型时，通常有两种方式处理不同类型：

使用any类型（失去类型检查）
为每种类型重复编写几乎相同的代码

泛型通过参数化类型解决了这个问题，使组件可以支持多种类型同时保持类型安全。

基本使用方法

1. 泛型函数

// 定义泛型函数，T是类型参数（可自定义名称）
function identity<T>(arg: T): T {
  return arg;
}

// 使用时指定类型
const num: number = identity<number>(10);
const str: string = identity<string>('hello');

// 类型推断（可省略显式类型）
const bool = identity(true); // 自动推断T为boolean

2. 泛型接口

// 定义泛型接口
interface Container<T> {
  value: T;
  getValue: () => T;
}

// 实现时指定类型
const numberContainer: Container<number> = {
  value: 100,
  getValue: () => 100
};

const stringContainer: Container<string> = {
  value: '泛型',
  getValue: () => '泛型'
};

3. 泛型类

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(1);
numberStack.push('2'); // 错误：不能将string分配给number

const stringStack = new Stack<string>();
stringStack.push('hello');

高级特性

1. 泛型约束

限制泛型只能是特定类型或具有特定属性：

// 约束T必须有length属性
interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

logLength('hello'); // 正确：string有length
logLength(10); // 错误：number没有length

2. 默认类型参数

为泛型指定默认类型：

function createArray<T = string>(length: number, value: T): T[] {
  return Array(length).fill(value);
}

const strArray = createArray(3, 'x'); // string[]
const numArray = createArray<number>(3, 10); // number[]

3. 多类型参数

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

const result = pair('age', 25); // [string, number]

典型应用场景

通用数据结构：如数组、栈、队列等
工具函数：如数组排序、过滤等不依赖具体类型的操作
API响应处理：统一处理不同类型的接口返回数据
组件封装：React/Vue等框架中的可复用组件

泛型命名约定

T：Type（表示类型）
K：Key（表示对象的键类型）
V：Value（表示对象的值类型）
E：Element（表示元素类型）

这些只是约定，实际可以使用任何有效名称。