TypeScript 泛型：2025 年终极指南

原文链接 TypeScript Generics: The Ultimate Guide, 2025 - 作者 Andre K.

大家好！

本文，我们将探讨 TypeScript 中的泛型，它们是什么？并且怎么去使用它们？

TypeScript 中的泛型是一个功能强大的工具，便于编写可复用性和类型安全的代码。不管你是新手还是老手开发者，掌握泛型将会提升你的 TypeScript 技能。

在这个完整的指南中，我们将学到：

• 什么是泛型，并且为什么要掌握
• 在函数，接口和类中，如何使用泛型
• 真实案例中的最佳实践
• 高级模式（条件类型，映射类型等）

最后，我们将在 TypeScript 中很自信地使用泛型。下面开始进入主题👇

1. TypeScript 中的泛型是什么？

泛型允许我们在不牺牲类型安全的前提下编写弹性和可复用的组件。当处理不同的数据类型时，泛型允许我们保留类型，而不是使用 any。

用什么使用泛型?

1. 避免代码重复 - 编写一个函数来涵盖不同类型
2. 更好的类型引用 - 自动补全和错误提示
3. 比 any 更安全 - 严格的类型维护，而没有运行时错误

基本的泛型案例👇

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

// 使用
const output = identity("Hello Generics from ITsoftMake.COM"); // 类型：字符串
const numOutput = identity(42); // 类型：数字

在这里，<T> 是一个类型变量，来捕获输入的类型。

2. 在函数中使用泛型

泛型函数👇

function logAndReturn<T>(value: T): T {
  console.log(value);
  return value;
}

const result = logAndReturn(23); // 打印出: 23

多个类型参数👇

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const merged = merge({ name: "Andre" }, { age: 30 }); // { name: "Andre", age: 30 }

3. 在接口和类中使用泛型

泛型接口👇

interface ApiResponse<T> {
  data: T;
  status: number;
}

const userResponse: ApiResponse<{ name: string }> = {
  data: { name: "Ritesh" },
  status: 200,
}

泛型类👇

class DataStorage<T> {
  private data: T[] = [];
  
  addItem(item: T) {
    this.data.push(item);
  }
  
  getItems(): T[] {
    return this.data;
  }
}

const stringStorage = new DataStorage<string>();
stringStorage.addItem("TypeScript Generics - Hi from ITsoftMake.COM");

4. 高级泛型模式

默认泛型类型👇

function fetchData<T = string>(url: string): Promise<T> {
  return fetch(url).then(res => res.json());
}

通过继承 extends 进行约束👇

interface HasId {
  id: number;
}

function getById<T extends HasId>(items: T[], id: number): T | undefined {
  return items.find(item => item.id === id);
}

条件型类型👇

type CheckNumber<T> = T extends number ? "Yes" : "No";
type A = CheckNumber<42>; // "Yes"
type B = CheckNumber<"TS">; // "No"

5. 真实使用案例

API 包装（通过类型安全进行获取）👇

async function fetchUser<T>(userId: string): Promise<T> {
  const response await fetch(`/api/users/${userId}`);
  return response.json();
}

const user = await fetchUser<{ name: string }>("123");

实用函数（比如：map，filter 等）👇

function mapArray<T, U>(arr: T:[], mapper: (item: T => U)): U[] {
  return arr.map(mapper);
}

const numbers = [1, 2, 3];
const doubled = mapArray(numbers, x => x * 2); // [2, 4, 6];

6. 常见错误和最佳实践

是否推荐	理由
NO	过度使用 any 而不是泛型 -> 会丢失类型安全
YES	当需要时使用约束(extends) -> 确保正确的类型
NO	过度嵌套泛型 -> 晦涩难懂
YES	保持简单的泛型并配备相应的文档 -> 这很棒

总结

泛型让 TypeScript 容易扩展和可维护。有效地使用它们，我们可以通过下面来实现👇

• 编写可复用的函数和类
• 提高类型安全 而不是用 any
• 优雅处理复杂数据结构

接下来: 尝试在我们的项目中使用泛型吧！

更多的内容官方 TypeScript 泛型文档