在现代前端开发中，TypeScript 因其类型系统的强大和灵活性，已经成为大多数项目的首选工具之一。泛型（Generics）作为 TypeScript 中的一个核心特性，能够使我们编写更加灵活和类型安全的代码。泛型让你可以在定义函数、类或接口时，使用占位符来表示类型，而不是直接指定具体的类型。这种做法不仅提升了代码的复用性，还能确保代码的类型安全。
1. 泛型基础
泛型的基本概念是让类型参数化，即在编写代码时不指定具体类型，而是使用一个占位符（通常是字母 T）来代表类型，直到调用时再确定具体类型。这样可以确保函数、类或接口的通用性，而不需要重复编写相似的代码。
function identity<T>(arg: T): T {
return arg;
}
let result1 = identity(42); // result1 的类型是 number
let result2 = identity("Hello, World!"); // result2 的类型是 string
在上面的代码中，identity 函数接收一个类型为 T 的参数 arg，并返回相同类型的值。无论 T 是 number、string 还是其他类型，identity 都能正确处理。因此，函数在调用时的类型决定了泛型的类型。
2. 泛型在类中的使用
除了函数，泛型还可以应用在类中。泛型类允许我们在创建类的实例时指定具体的类型，这使得类更加灵活。例如，可以定义一个泛型类，它可以接收任何类型的数据。
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
setValue(value: T): void {
this.value = value;
}
}
let numberBox = new Box<number>(123);
console.log(numberBox.getValue()); // 输出 123
let stringBox = new Box<string>("Hello, TypeScript!");
console.log(stringBox.getValue()); // 输出 "Hello, TypeScript!"
在这个示例中，Box 类是一个泛型类，它接受一个类型 T，并且类中的方法和属性都使用这个泛型类型。通过泛型，我们可以创建不同类型的 Box 实例，例如 Box<number> 或 Box<string>。这使得代码更具通用性，可以处理不同类型的数据，而不需要为每种类型都编写一个新的类。
3. 泛型在接口中的使用
泛型不仅可以用在类和函数上，接口也可以使用泛型。泛型接口提供了一种灵活的方式来定义结构，可以接受不同类型的值，并保持类型的安全。
interface Pair<T, U> {
first: T;
second: U;
}
let pair1: Pair<number, string> = { first: 1, second: "one" };
let pair2: Pair<boolean, Date> = { first: true, second: new Date() };
在这个例子中，Pair 接口接受两个泛型类型参数 T 和 U，表示一对数据。通过这种方式，我们可以创建包含不同类型数据的对象。例如，pair1 是一个 number 和 string 类型的配对，而 pair2 是一个 boolean 和 Date 类型的配对。
4. 泛型约束（类型约束）
有时，泛型的类型可以过于宽泛，可能会导致某些情况出现错误。为了确保泛型类型符合某种约定或结构，我们可以使用 类型约束 来限制泛型的类型范围。
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
console.log(arg.length);
}
logLength([1, 2, 3]); // 数组有 length 属性，输出 3
logLength("Hello"); // 字符串有 length 属性，输出 5
// logLength(123); // 编译错误，数字没有 length 属性
在这个例子中，logLength 函数使用了泛型约束：T extends Lengthwise，意味着 T 必须是具有 length 属性的类型。这样，只有那些具有 length 属性（如数组或字符串）的类型才能传入 logLength 函数，其他类型（如数字、布尔值）则会触发编译错误，从而避免了潜在的运行时错误。
通过使用约束，我们可以限制泛型的类型，使得代码更加安全。
5. 多个泛型参数
有时我们需要定义多个泛型类型参数，以处理更复杂的场景。TypeScript 允许在一个函数、类或接口中使用多个泛型参数，这使得我们可以灵活处理不同类型的数据。
class Pair<T, U> {
constructor(public first: T, public second: U) {}
toString(): string {
return `(${this.first}, ${this.second})`;
}
}
let pair = new Pair<string, number>("age", 30);
console.log(pair.toString()); // 输出 (age, 30)
在这个例子中，Pair 类定义了两个泛型类型参数 T 和 U，分别表示一对值的类型。通过这种方式，我们可以灵活地定义包含不同类型数据的配对，比如字符串和数字的组合。
6. 泛型与函数重载
有时，泛型和函数重载可以结合使用，从而根据不同的输入类型返回不同的输出类型。这使得我们能够更加精确地控制函数的行为。
function wrap<T>(value: T): T {
return value;
}
function wrap<T>(value: T[]): T[] {
return value;
}
let number = wrap(42); // number 是 42，类型是 number
let numbers = wrap([1, 2, 3]); // numbers 是 [1, 2, 3]，类型是 number[]
在这个示例中，wrap 函数有两个重载签名：一个处理单个值，另一个处理数组。通过泛型，wrap 函数能够根据不同的输入类型来决定返回值的类型。重载使得我们可以对不同的输入类型进行不同的处理。
7. 使用默认泛型
在某些情况下，如果调用函数时没有显式传递泛型类型，TypeScript 可以使用默认的类型。通过为泛型提供默认值，可以简化代码并减少不必要的类型声明。
function createArray<T = number>(length: number, value: T): T[] {
return new Array(length).fill(value);
}
let numberArray = createArray(3, 5); // 返回 [5, 5, 5]，类型是 number[]
let stringArray = createArray(3, "hello"); // 返回 ["hello", "hello", "hello"]，类型是 string[]
在上面的代码中，createArray 函数定义了一个默认的泛型 T = number。如果调用时没有显式传入类型参数，TypeScript 会使用 number 作为默认类型，从而避免了额外的类型声明。
8. 泛型约束与继承
泛型可以与继承结合使用，这意味着我们可以在泛型类型上使用继承约束，确保类型遵循特定的结构。
interface Animal {
name: string;
}
class Dog implements Animal {
name: string;
breed: string;
constructor(name: string, breed: string) {
this.name = name;
this.breed = breed;
}
}
class Zoo<T extends Animal> {
private animals: T[] = [];
addAnimal(animal: T): void {
this.animals.push(animal);
}
getAnimals(): T[] {
return this.animals;
}
}
let zoo = new Zoo<Dog>();
zoo.addAnimal(new Dog("Buddy", "Golden Retriever"));
console.log(zoo.getAnimals());
在这个例子中，Zoo 类的泛型 T 被约束为必须是 Animal 类型或其子类型。这样，Zoo 类只能管理具有 name 属性的对象，确保了代码的一致性和类型安全。
总结
TypeScript 的泛型使得我们可以编写更加灵活和通用的代码，同时保持类型安全。泛型不仅适用于函数、类和接口，也支持类型约束、默认类型、继承约束等功能，使得代码更加严谨和可靠。通过泛型，我们能够以一种类型安全的方式处理各种不同类型的数据，从而避免运行时的类型错误。
在实际开发中，泛型的应用场景非常广泛，例如创建通用数据结构、处理 API 请求/响应数据、实现可复用的 UI 组件等。掌握泛型的使用，能够大大提高我们的开发效率和代码质量。
