TypeScript 泛型详解

泛型（Generics）是 TypeScript 的核心特性，用于创建可复用的组件，支持多种类型而不丢失类型安全。以下是系统化的解析和示例：

---

1. 基本概念

泛型通过类型变量（如 T）实现类型占位，在调用时指定具体类型：

function identity<T>(arg: T): T {
  return arg;
}
const output = identity<string>("Hello");  // 显式指定类型
const inferred = identity(42);             // 自动推断为 number

---

2. 泛型约束

通过 extends 限制类型范围，确保满足特定条件：

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(obj: T): void {
  console.log(obj.length);
}
logLength("text");    // 有效：string 有 length 属性
logLength([1, 2, 3]); // 有效：数组有 length
// logLength(100);    // 错误：number 无 length

---

3. 泛型接口

定义可复用的类型结构：

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

const pair1: KeyValuePair<string, number> = { key: "age", value: 30 };
const pair2: KeyValuePair<number, boolean> = { key: 1, value: true };

---

4. 泛型类

创建支持多种类型的类：

class Box<T> {
  private content: T;
  constructor(value: T) {
    this.content = value;
  }
  getValue(): T {
    return this.content;
  }
}

const stringBox = new Box<string>("TypeScript");
const numberBox = new Box<number>(100);

---

5. 默认泛型参数

为泛型提供默认类型：

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

const strArr = createArray(3, "A");  // T 默认为 string
const numArr = createArray<number>(3, 0); // 显式指定

---

6. 实际应用：API 响应封装

封装后端 API 返回的通用结构：

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

// 用户数据响应
type UserResponse = ApiResponse<{ id: number; name: string }>;
const userRes: UserResponse = {
  code: 200,
  data: { id: 1, name: "Alice" },
  message: "Success"
};

// 列表数据响应
type ListResponse = ApiResponse<number[]>;
const listRes: ListResponse = {
  code: 200,
  data: [1, 2, 3],
  message: "OK"
};

---

关键优势

• 类型安全：编译时捕获类型错误
• 代码复用：避免重复逻辑（如 any 的滥用）
• 智能推断：自动推导类型减少冗余代码

通过泛型，可构建灵活且类型严格的 TypeScript 应用。