TypeScript 中泛型的理解与应用

泛型 (Generics) 是 TypeScript 的强大特性之一，允许我们在定义函数、类、接口等时，使用类型参数来使得代码更加灵活和可重用。泛型通过延迟指定类型的方式，使得代码在不失去类型检查的前提下，可以处理多种不同类型的数据。

1. 泛型的基本概念

泛型使得函数、类、接口等的类型能够在使用时灵活指定，而不是提前硬编码某种类型。这使得我们的代码更加灵活且类型安全。

示例：基本的泛型函数

function identity<T>(arg: T): T {
    return arg;
}

let result1 = identity(5);         // result1 的类型是 number
let result2 = identity("hello");   // result2 的类型是 string

在这个例子中，identity 函数接受一个类型参数 T，并返回同样类型的值。T 代表一个占位符，表示我们将来可以传递任何类型给函数，函数会自动推断出返回值的类型。

2. 泛型的应用场景

1. 通用函数

泛型函数通常用于处理不同类型的数据，但又不希望在每次调用时都明确指定类型。通过泛型，我们可以为函数提供更强的类型安全性。

2. 容器类（集合类型）

泛型在容器类中尤为重要。例如，我们可以定义一个数组类，允许数组中的元素是任何类型。

3. 类型约束

泛型可以配合类型约束，限制泛型的具体类型，使得代码在灵活性和安全性之间取得平衡。

4. 接口和类

泛型不仅可以应用于函数，还可以应用于接口和类，进一步增强代码的复用性和类型安全性。

3. 泛型的实际项目应用

示例 1：泛型数组

假设你在开发一个库存管理系统，可能会有多个不同类型的库存项目，如书籍、电子产品、家具等。我们可以使用泛型来创建一个通用的数组管理工具，使其能够管理不同类型的库存项目。

class Inventory<T> {
    private items: T[] = [];

    add(item: T): void {
        this.items.push(item);
    }

    getAll(): T[] {
        return this.items;
    }
}

interface Book {
    title: string;
    author: string;
}

interface Electronics {
    name: string;
    brand: string;
    warrantyPeriod: number;
}

// 使用泛型数组管理书籍
let bookInventory = new Inventory<Book>();
bookInventory.add({ title: "The Catcher in the Rye", author: "J.D. Salinger" });
bookInventory.add({ title: "1984", author: "George Orwell" });

console.log(bookInventory.getAll());  // 输出书籍的数组

// 使用泛型数组管理电子产品
let electronicsInventory = new Inventory<Electronics>();
electronicsInventory.add({ name: "Smartphone", brand: "BrandX", warrantyPeriod: 2 });
electronicsInventory.add({ name: "Laptop", brand: "BrandY", warrantyPeriod: 3 });

console.log(electronicsInventory.getAll());  // 输出电子产品的数组

在这个示例中，Inventory 类是一个泛型类，它可以管理任何类型的库存项目。通过使用泛型，我们能够实现一个通用的库存管理工具，而不需要为每种类型的库存单独定义一个类。

示例 2：泛型接口

泛型接口可以用于定义通用的数据结构，例如在开发一个 API 客户端时，我们可能需要一个接口来处理不同类型的响应数据。

interface ApiResponse<T> {
    data: T;
    status: string;
    message: string;
}

function handleApiResponse<T>(response: ApiResponse<T>) {
    console.log(`Status: ${response.status}`);
    console.log(`Message: ${response.message}`);
    console.log("Data:", response.data);
}

interface User {
    id: number;
    name: string;
}

interface Product {
    id: number;
    name: string;
    price: number;
}

// 使用泛型接口处理不同的 API 响应
const userResponse: ApiResponse<User> = {
    data: { id: 1, name: "Alice" },
    status: "success",
    message: "User fetched successfully"
};

handleApiResponse(userResponse);

const productResponse: ApiResponse<Product> = {
    data: { id: 101, name: "Laptop", price: 1500 },
    status: "success",
    message: "Product fetched successfully"
};

handleApiResponse(productResponse);

在这个示例中，ApiResponse<T> 是一个泛型接口，用来描述 API 响应的数据结构。通过泛型参数 T，我们能够根据不同的响应类型灵活调整数据结构。

示例 3：泛型约束

有时我们希望对泛型进行约束，确保其具有某些特定的属性或方法。可以使用 extends 关键字来约束泛型类型。

interface Nameable {
    name: string;
}

function printName<T extends Nameable>(item: T): void {
    console.log(item.name);
}

const person = { name: "Alice", age: 25 };
const product = { name: "Laptop", price: 1000 };

// 这两个对象都符合 Nameable 的约束
printName(person);  // 输出 "Alice"
printName(product);  // 输出 "Laptop"

// 下面的代码会报错，因为没有 name 属性
// const invalidObject = { age: 25 };
// printName(invalidObject);  // 编译错误

在这个例子中，T extends Nameable 表示泛型 T 必须具有 name 属性。这样可以确保我们只能传递那些符合条件的数据类型，增强了类型安全性。

4. 泛型的高级应用

1. 联合类型与泛型

泛型和联合类型结合使用，可以允许函数处理多种类型的输入。

function combine<T, U>(a: T, b: U): T | U {
    return a || b;
}

let result = combine(5, "hello");
console.log(result);  // 输出 "hello"

2. 条件类型

TypeScript 4.1 引入了条件类型，它允许根据条件来决定类型。

type IsString<T> = T extends string ? "Yes" : "No";

type A = IsString<string>;  // "Yes"
type B = IsString<number>;  // "No"

5. 总结

泛型 是 TypeScript 中的一个强大工具，它可以使得代码更加灵活、类型安全并且可重用。通过泛型，函数、类、接口等结构可以处理不同类型的数据，而不牺牲类型检查的安全性。常见的应用场景包括：

• 通用的数据结构或容器类，如数组、列表等。
• 高度可重用的函数和 API 请求处理。
• 通过类型约束限制泛型的使用，使得代码既灵活又安全。

通过实际项目中的应用示例，我们可以看到泛型在项目中的重要性，它使得代码更加模块化、可扩展，并且减少了重复代码的编写。

希望这些例子和讲解能帮助你深入理解 TypeScript 中的泛型及其应用场景！