TypeScript 泛型:2025 年终极指南

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

大家好!

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

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

在这个完整的指南中,我们将学到:

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

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

1. TypeScript 中的泛型是什么?

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

用什么使用泛型?

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

基本的泛型案例👇

typescript 复制代码
function identity<T>(arg: T): T {
  return arg;
}

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

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

2. 在函数中使用泛型

泛型函数👇

typescript 复制代码
function logAndReturn<T>(value: T): T {
  console.log(value);
  return value;
}

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

多个类型参数👇

typescript 复制代码
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. 在接口和类中使用泛型

泛型接口👇

typescript 复制代码
interface ApiResponse<T> {
  data: T;
  status: number;
}

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

泛型类👇

typescript 复制代码
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. 高级泛型模式

默认泛型类型👇

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

通过继承 extends 进行约束👇

typescript 复制代码
interface HasId {
  id: number;
}

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

条件型类型👇

typescript 复制代码
type CheckNumber<T> = T extends number ? "Yes" : "No";
type A = CheckNumber<42>; // "Yes"
type B = CheckNumber<"TS">; // "No"

5. 真实使用案例

API 包装(通过类型安全进行获取)👇

typescript 复制代码
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");

实用函数(比如:mapfilter 等)👇

typescript 复制代码
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 泛型文档

相关推荐
无羡仙7 分钟前
Webpack 背后做了什么?
javascript·webpack
roamingcode1 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS1 小时前
NPM模块化总结
前端·javascript
灵感__idea1 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro2 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程3 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng4 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源
GISer_Jing4 小时前
Vue Teleport 原理解析与React Portal、 Fragment 组件
前端·vue.js·react.js
Summer不秃4 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus4 小时前
Base64编码详解
前端·javascript