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 泛型文档

相关推荐
典学长编程4 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
德育处主任10 分钟前
p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型
前端·前端框架·canvas
文火冰糖的硅基工坊21 分钟前
[硬件电路-124]:模拟电路 - 信号处理电路 - 测量系统的前端电路详解
前端·嵌入式硬件·fpga开发·架构·信号处理·电路
爷_1 小时前
手把手教程:用腾讯云新平台搞定专属开发环境,永久免费薅羊毛!
前端·后端·架构
狂炫一碗大米饭1 小时前
如何在 Git 中检出远程分支
前端·git·github
东风西巷2 小时前
猫眼浏览器:简约安全的 Chrome 内核增强版浏览器
前端·chrome·安全·电脑·软件需求
太阳伞下的阿呆2 小时前
npm安装下载慢问题
前端·npm·node.js
pe7er2 小时前
Tauri 应用打包与签名简易指南
前端
前端搬砖仔噜啦噜啦嘞2 小时前
Cursor AI 编辑器入门教程和实战
前端·架构