TypeScript 是一种静态类型的编程语言，它通过类型系统增强了 JavaScript 的功能，使开发者能够编写出更加健壮和易于维护的代码。其中，泛型是 TypeScript 中一个非常强大的特性，它允许我们在定义函数、接口或类的时候，不预先指定具体的类型，而是让调用者在使用时再指定类型。这样不仅可以提高代码的复用率，还能确保类型的安全性。
泛型的基本概念 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在调用时再指定类型的一种特性。通过使用泛型，我们可以创建可重用的组件，这些组件可以处理多种数据类型，同时保持类型安全。
如何使用泛型 定义泛型函数 在 TypeScript 中定义泛型函数非常简单，只需要在函数名后面加上 （这里的 T 可以是任何标识符，用来表示一个类型参数），然后在函数体内部就可以使用这个类型参数了。
Typescript 深色版本 function identity(arg: T): T { return arg; }
let output = identity("myString"); // 指定类型为 string console.log(output); // 输出: myString 使用多个类型参数 有时候我们需要使用多个不同的类型参数，这时可以在尖括号中定义多个类型参数，用逗号隔开。
Typescript 深色版本 function swap<T, U>(tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]]; }
let swapped = swap([7, "hello"]); console.log(swapped); // 输出: ["hello", 7] 定义泛型接口 我们也可以在接口中使用泛型，这样接口就可以接受任意类型的属性值。
Typescript 深色版本 interface Box { content: T; }
let box: Box = { content: 100 }; console.log(box.content); // 输出: 100 定义泛型类 在类中使用泛型可以让类的方法或属性具有更广泛的适用性。
Typescript 深色版本 class Queue { private data: T[] = [];
push(item: T) {
this.data.push(item);
}
pop(): T | undefined {
return this.data.shift();
}
}
let numberQueue = new Queue(); numberQueue.push(1); numberQueue.push(2); console.log(numberQueue.pop()); // 输出: 1 使用类型约束 为了限制泛型参数的类型范围，我们可以使用类型约束。类型约束可以通过扩展一个已存在的接口或类型来实现。
Typescript 深色版本 interface Lengthwise { length: number; }
function loggingIdentity(arg: T): T { console.log(arg.length); // 现在我们知道 arg 有一个 length 属性 return arg; }
loggingIdentity({length: 10, value: 3}); // 正确 // loggingIdentity(42); // 错误，数字没有 length 属性 在这个例子中，我们通过 extends 关键字指定了 T 必须符合 Lengthwise 接口，即必须拥有 length 属性。
泛型的应用场景 数据结构：如上面提到的队列、栈等数据结构，可以使用泛型来处理多种类型的数据。 工具函数：创建一些通用的工具函数，比如数组去重、对象合并等，可以使用泛型来增强函数的灵活性。 UI 组件：在前端开发中，创建可配置的 UI 组件时，使用泛型可以使组件更加灵活多变。 结论 通过合理使用泛型，我们不仅可以写出更加灵活和可重用的代码，还可以借助 TypeScript 的类型检查系统来保证代码的类型安全性。这对于大型项目的开发和维护来说尤为重要。随着 TypeScript 的不断普及和发展，掌握泛型的使用将成为每个前端工程师必备的技能之一。
