TypeScript 泛型编程指南

什么是泛型？

泛型允许我们创建可重用的组件，支持多种类型而非单一类型。

基础泛型函数

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

const result = identity<string>("hello");
const num = identity<number>(42);

泛型接口

interface Box<T> {
  value: T;
  getValue(): T;
}

const stringBox: Box<string> = {
  value: "hello",
  getValue() { return this.value; }
};

泛型约束

interface Lengthwise {
  length: number;
}

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

logLength("hello"); // OK
logLength(123); // Error

实用工具类型

// Partial: 所有属性可选
Partial<User>

// Required: 所有属性必填
Required<User>

// Pick: 选取部分属性
Pick<User, "id" | "name">

// Omit: 排除部分属性
Omit<User, "password">

泛型在 React 中的应用

function List<T>({
  items,
  renderItem
}: {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}) {
  return <ul>{items.map(renderItem)}</ul>;
}