TypeScript 类、泛型的使用实践记录
引言
在现代前端开发中，TypeScript 凭借其强大的类型系统和工具支持，已经成为 JavaScript 开发者的重要工具。泛型（Generics）是 TypeScript 中的重要特性之一，它能够为代码提供更高的灵活性和类型安全性。在本文中，我们将探讨泛型的基本用法，并结合实际案例展示如何在类中使用泛型以及如何通过类型约束提升代码的安全性和可读性。
一、什么是泛型？
泛型是一种让代码在支持多种类型的同时仍然保持类型安全的方法。它允许开发者定义具有通用性的组件，而不需要为不同类型重复实现。
泛型的定义
function identity<T>(value: T): T {
return value;
}
<T>：泛型参数，可以是任何名称。T：代表传入的类型参数，调用时会根据上下文推断具体的类型。
调用示例：
console.log(identity<number>(42)); // 输出：42
console.log(identity<string>("Hello")); // 输出：Hello
二、在类中使用泛型
泛型在类中的应用极为广泛，尤其是在封装复杂逻辑时，可以为代码提供良好的复用性和类型支持。
示例：创建一个简单的缓存类
需求：设计一个可以缓存任意类型数据的类，同时确保获取缓存时能获得正确的类型提示。
实现代码
class Cache<T> {
private store: Map<string, T> = new Map();
set(key: string, value: T): void {
this.store.set(key, value);
}
get(key: string): T | undefined {
return this.store.get(key);
}
remove(key: string): void {
this.store.delete(key);
}
}
使用方法
// 缓存数字类型
const numberCache = new Cache<number>();
numberCache.set("age", 25);
console.log(numberCache.get("age")); // 输出：25
// 缓存字符串类型
const stringCache = new Cache<string>();
stringCache.set("greeting", "Hello, TypeScript!");
console.log(stringCache.get("greeting")); // 输出：Hello, TypeScript!
三、泛型中的类型约束
在某些场景下，泛型可能需要遵循特定的约束条件。通过 extends 关键字，我们可以限定泛型的类型范围。
示例：实现一个具有特定属性的泛型接口
需求：定义一个函数，只允许具有 id 属性的对象作为参数。
实现代码
interface HasId {
id: number;
}
function findById<T extends HasId>(items: T[], id: number): T | undefined {
return items.find(item => item.id === id);
}
使用方法
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
// 返回类型安全
const user = findById(users, 2);
console.log(user); // 输出：{ id: 2, name: "Bob" }
类型约束的优点
- 提升代码灵活性：支持多种结构，但必须符合约束条件。
- 增强代码安全性：在编译阶段捕获类型错误，避免运行时出错。
四、高级场景：泛型与继承的结合
在复杂业务逻辑中，泛型可以结合继承来处理多层次的数据结构。例如，在设计一个多级继承的服务层时，我们希望能够在父类中定义通用逻辑，并在子类中使用具体类型。
示例代码
abstract class Repository<T> {
protected items: T[] = [];
add(item: T): void {
this.items.push(item);
}
getAll(): T[] {
return this.items;
}
}
interface User {
id: number;
name: string;
}
class UserRepository extends Repository<User> {
findByName(name: string): User | undefined {
return this.items.find(user => user.name === name);
}
}
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });
console.log(userRepo.findByName("Alice")); // 输出：{ id: 1, name: "Alice" }
五、总结
- 基本泛型的定义和使用。
- 泛型在类中的实践，提升了代码的可复用性。
- 类型约束的使用，确保了更高的类型安全性。
- 泛型与继承的结合，解决了复杂数据结构的处理问题。
