TypeScript 中的泛型与类型约束：让代码更灵活、更安全
在 TypeScript 中，类型系统的引入极大地提升了代码的可靠性与可读性。而泛型（Generics）作为其中的重要特性之一，可以让我们的代码具备更高的灵活性。泛型不仅允许我们在编写代码时保持类型安全，还能在多种数据类型之间复用代码，使其更加通用和模块化。本文将介绍泛型的基础知识，并探讨在实际项目中如何使用泛型和类型约束，帮助你写出灵活而安全的 TypeScript 代码。
一、TypeScript 中的泛型基础
1. 什么是泛型
泛型是一种“在编写代码时不预先指定具体数据类型，而是在使用时指定”的特性。通过泛型，我们可以编写一段逻辑，适用于多种不同的类型，而不会牺牲类型安全性。
function identity<T>(arg: T): T {
return arg;
}
const num = identity<number>(42); // T 被推断为 number
const str = identity<string>("Hello, TypeScript"); // T 被推断为 string
在上面的例子中，T 就是一个泛型参数，它可以是任意类型。调用 identity 函数时，可以根据传入的参数自动推断出类型，也可以手动指定。
2. 泛型类和泛型接口
除了函数，我们也可以在类和接口中使用泛型。这使得我们能够在创建实例时指定特定的类型，从而增强类型的灵活性。
泛型接口：
interface Box<T> {
value: T;
}
const numberBox: Box<number> = { value: 42 };
const stringBox: Box<string> = { value: "Hello" };
泛型类：
class GenericBox<T> {
content: T;
constructor(content: T) {
this.content = content;
}
getContent(): T {
return this.content;
}
}
const numberBox = new GenericBox<number>(42);
const stringBox = new GenericBox<string>("Hello, TypeScript");
使用泛型类和接口，我们可以在创建时指定不同的类型参数，这样即便是相同的接口或类，也可以适应多种数据类型。
二、泛型在项目中的实际应用场景
1. 创建通用数据结构
在日常开发中，我们可能会经常用到一些通用的数据结构，比如栈（Stack）和队列（Queue）。使用泛型可以让这些数据结构在不同类型下复用，避免重复编写代码。
class Stack<T> {
private items: T[] = [];
push(item: T): void {
this.items.push(item);
}
pop(): T | undefined {
return this.items.pop();
}
}
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 2
const stringStack = new Stack<string>();
stringStack.push("a");
stringStack.push("b");
console.log(stringStack.pop()); // "b"
通过使用 Stack<T> 泛型类，我们可以创建 Stack<number> 或 Stack<string> 等不同类型的栈，而无需重复编写代码。
2. 函数重用与类型推断
泛型函数能实现类型的动态推断，从而重用代码逻辑。例如，我们可以用泛型来创建一个过滤函数，允许过滤各种不同类型的数组。
function filterArray<T>(arr: T[], predicate: (value: T) => boolean): T[] {
return arr.filter(predicate);
}
const numbers = [1, 2, 3, 4];
const evenNumbers = filterArray(numbers, num => num % 2 === 0); // [2, 4]
const strings = ["apple", "banana", "cherry"];
const fruitsWithA = filterArray(strings, str => str.includes("a")); // ["apple", "banana"]
在这个例子中，filterArray 函数接受一个数组和一个谓词函数，返回满足条件的元素。因为用了泛型，filterArray 可以在不同类型的数组上复用。
3. 为 API 响应和请求定义类型
在前端项目中，与后端通信时需要处理不同的 API 请求和响应。我们可以使用泛型来定义通用的 API 响应类型，以适配不同的数据模型。
interface ApiResponse<T> {
data: T;
error?: string;
}
function fetchData<T>(url: string): Promise<ApiResponse<T>> {
return fetch(url)
.then(response => response.json())
.then(data => ({ data }))
.catch(error => ({ error: error.message }));
}
// 使用泛型定义不同的数据类型
interface User {
id: number;
name: string;
}
interface Post {
id: number;
title: string;
content: string;
}
async function getUser() {
const response = await fetchData<User>('/api/user');
if (response.data) {
console.log(response.data.name);
}
}
async function getPost() {
const response = await fetchData<Post>('/api/post');
if (response.data) {
console.log(response.data.title);
}
}
通过泛型定义 ApiResponse<T>，我们可以根据不同的数据模型轻松创建不同的 API 响应结构，而不会牺牲类型检查。
三、使用类型约束来提升泛型的安全性
在某些情况下，我们希望泛型只接受特定的类型，这时可以使用 类型约束。
1. 限制泛型的类型范围
假设我们要编写一个函数，该函数需要一个对象参数，并返回该对象的某个属性。这时可以使用类型约束 extends 来限定泛型类型，确保传入的参数包含该属性。
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const user = { id: 1, name: "Alice" };
console.log(getProperty(user, "name")); // Alice
// getProperty(user, "age"); // Error: Argument of type '"age"' is not assignable
在这个例子中，K extends keyof T 限制了 K 必须是 T 的属性名。这样可以确保我们不会传入不正确的属性名，从而避免潜在的错误。
2. 限制为特定类型的子类
在实现一些业务逻辑时，我们可能希望泛型只接受某些特定的类或接口。比如，我们可以限制泛型为某种接口的实现。
interface HasId {
id: number;
}
function logId<T extends HasId>(obj: T): void {
console.log(obj.id);
}
class Product implements HasId {
constructor(public id: number, public name: string) {}
}
const product = new Product(1, "Laptop");
logId(product); // 1
在此例中，logId 函数使用了泛型约束 T extends HasId，因此只有实现了 HasId 接口的类型才能传入该函数。
四、结论
在 TypeScript 中，泛型为代码的灵活性和可复用性提供了强有力的支持，而类型约束则进一步增强了代码的安全性。在实际项目中，我们可以通过泛型来实现通用数据结构、函数重用、API 响应处理等功能，并使用类型约束来确保类型的正确性。掌握泛型的使用将帮助我们写出更加健壮的代码，使代码在面对变化时更加灵活。
希望这篇文章能帮助你更好地理解和使用 TypeScript 中的泛型，提升代码质量。
