原文链接 TypeScript Generics: The Ultimate Guide, 2025 - 作者 Andre K.
大家好!
本文,我们将探讨 TypeScript
中的泛型,它们是什么?并且怎么去使用它们?
TypeScript
中的泛型是一个功能强大的工具,便于编写可复用性和类型安全的代码。不管你是新手还是老手开发者,掌握泛型将会提升你的 TypeScript
技能。
在这个完整的指南中,我们将学到:
- 什么是泛型,并且为什么要掌握
- 在函数,接口和类中,如何使用泛型
- 真实案例中的最佳实践
- 高级模式(条件类型,映射类型等)
最后,我们将在 TypeScript
中很自信地使用泛型。下面开始进入主题👇
1. TypeScript
中的泛型是什么?
泛型允许我们在不牺牲类型安全的前提下编写弹性和可复用的组件。当处理不同的数据类型时,泛型允许我们保留类型,而不是使用 any
。
用什么使用泛型?
- 避免代码重复 - 编写一个函数来涵盖不同类型
- 更好的类型引用 - 自动补全和错误提示
- 比
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");
实用函数(比如:map
,filter
等)👇
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
泛型文档