TypeScript中的泛型：初学者完全指南

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

```html

TypeScript 中的 Generics：为什么需要以及如何使用

TypeScript 是一个强大的工具，它为 JavaScript 添加了静态类型检查。然而，如果你刚开始学习 TypeScript，可能会遇到需要为不同数据类型编写相同代码的情况。这时，Generics（泛型）就派上用场了。在本文中，我们将详细讲解什么是 Generics，为什么需要它们，以及如何在实际中使用它们。

什么是 Generics，为什么它们很重要？

Generics 是 TypeScript 的一种机制，它允许你创建能够处理多种数据类型（而不是单一特定类型）的组件（如函数、类、接口）。想象一下，你正在编写一个函数，它需要同时处理数字、字符串和数组。如果没有泛型，你只能使用 any 类型（这会破坏 TypeScript 的初衷），或者为同一个函数创建多个副本。

Generics 的主要优势：

类型安全 — 你保留了严格的类型检查，同时代码仍然保持灵活。
代码复用 — 一个函数或类可以处理不同的类型。
可读性 — 代码变得更清晰，并且具有自文档化的特性。

Generics 的基本语法

让我们从一个最简单的例子开始。假设我们需要一个函数，它返回传入的参数。不使用 Generics 时，我们会这样写：

function identity(arg: number): number {
    return arg;
}

但是，如果我们需要传入一个字符串呢？那就得再创建一个新函数。使用 Generics，我们可以这样做：

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

// 使用方式：
let output1 = identity<string>("你好");
let output2 = identity<number>(42);
let output3 = identity<boolean>(true);

这里的 <T> 是一个类型参数（或类型变量）。当我们调用函数时，TypeScript 会自动替换为相应的类型。你可以使用任何字母：T、U、V，甚至是有意义的名称如 Type。

顺便提一下，TypeScript 可以自动推断类型，因此通常可以省略显式指定：

let output = identity("你好"); // TypeScript 会自动推断 T = string

处理数组和多个类型

Generics 最常见的应用之一就是处理数组。假设我们想编写一个函数，它接受一个数组并返回第一个元素：

function getFirstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

const numbers = [1, 2, 3];
const firstNumber = getFirstElement(numbers); // 类型为 number | undefined

const strings = ["a", "b", "c"];
const firstString = getFirstElement(strings); // 类型为 string | undefined

注意：我们使用了 T[]，它等同于 Array<T>。如果函数需要接受两种不同的类型呢？很简单！

function merge<T, U>(obj1: T, obj2: U): T & U {
    return { ...obj1, ...obj2 };
}

const result = merge({ name: "安娜" }, { age: 25 });
// result 的类型为 { name: string; } & { age: number; }
// 实际上就是：{ name: string; age: number; }

Generics 的约束（Constraints）

有时我们需要泛型不仅适用于任何类型，而只适用于那些具有特定属性的类型。这时可以使用 extends 关键字来添加约束。

例如，我们想编写一个函数来获取对象的长度。显然，并非所有类型都有 length 属性。让我们来验证一下：

function getLength<T extends { length: number }>(item: T): number {
    return item.length;
}

// 正确用法：
getLength("你好"); // 字符串有 length 属性
getLength([1, 2, 3]); // 数组有 length 属性

// 错误用法：
// getLength(42); // 错误：number 类型没有 length 属性

通过使用 extends，我们告诉 TypeScript：“这个泛型类型 T 必须具有 length: number 属性”。这样，TypeScript 就能在编译时捕获错误。

在类中使用 Generics

Generics 不仅适用于函数，也适用于类。例如，让我们创建一个简单的栈（Stack）数据结构：

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

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

    pop(): T | undefined {
        return this.items.pop();
    }

    peek(): T | undefined {
        return this.items[this.items.length - 1];
    }
}

// 使用方式：
const numberStack = new Stack<number>();
numberStack.push(10);
numberStack.push(20);
console.log(numberStack.pop()); // 20

const stringStack = new Stack<string>();
stringStack.push("世界");
stringStack.push("你好");
console.log(stringStack.peek()); // "你好"

这样，同一个 Stack 类就可以安全地用于数字、字符串或任何其他类型。