一、什么是泛型编程
泛型编程就像是一个万能工具箱，你可以往里面放各种不同类型的工具，而这个工具箱本身却不需要因为工具类型的不同而改变。在 TypeScript 里，泛型可以让我们编写更灵活、可复用的代码。
举个例子，假如我们要写一个函数来返回传入参数本身，不考虑类型的话，我们可能会这么写：
// TypeScript 技术栈
function identity(arg: any): any {
return arg;
}
// 使用示例
let output1 = identity("hello");
let output2 = identity(123);
console.log(output1); // 输出: hello
console.log(output2); // 输出: 123
这里用 any 类型虽然能实现功能，但它丢失了类型信息，也就是我们不知道返回值到底是什么类型。而泛型就能解决这个问题。
// TypeScript 技术栈
function identity<T>(arg: T): T {
return arg;
}
// 使用示例
let output3 = identity<string>("world");
let output4 = identity<number>(456);
console.log(output3); // 输出: world
console.log(output4); // 输出: 456
这里的 <T> 就是泛型类型变量，它代表一种类型，具体是什么类型在调用函数时确定。这样我们就能明确知道返回值的类型了。
二、泛型在函数中的应用
1. 泛型函数的基本使用
我们再来看一个更复杂一点的泛型函数示例，这个函数用于交换两个变量的值。
// TypeScript 技术栈
function swap<T, U>(a: T, b: U): [U, T] {
return [b, a];
}
// 使用示例
let [first, second] = swap<string, number>("apple", 10);
console.log(first); // 输出: 10
console.log(second); // 输出: apple
这里使用了两个泛型类型变量 <T> 和 <U>，分别代表两个不同的类型。函数接收两个不同类型的参数，然后返回一个元组，元组的元素类型和传入参数的类型顺序相反。
2. 泛型函数的类型推断
在调用泛型函数时，我们并不一定要显式地指定泛型类型，TypeScript 可以根据传入的参数自动推断出泛型类型。
// TypeScript 技术栈
function printArray<T>(arr: T[]): void {
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
}
// 使用示例
let numbers = [1, 2, 3, 4, 5];
printArray(numbers); // 这里 TypeScript 会自动推断 T 为 number 类型
三、泛型在类中的应用
1. 泛型类的定义
泛型类的使用和泛型函数类似，我们可以让类在创建对象时根据传入的类型来确定类中属性和方法的类型。
// TypeScript 技术栈
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
constructor(zeroValue: T, addFunction: (x: T, y: T) => T) {
this.zeroValue = zeroValue;
this.add = addFunction;
}
}
// 使用示例
let myGenericNumber = new GenericNumber<number>(0, function (x, y) {
return x + y;
});
console.log(myGenericNumber.add(5, 3)); // 输出: 8
这里定义了一个泛型类 GenericNumber<T>，它有一个属性 zeroValue 和一个方法 add，它们的类型都由泛型类型变量 T 决定。
2. 泛型类的继承
泛型类也可以被继承，子类可以继续使用泛型，也可以指定具体的类型。
// TypeScript 技术栈
class BaseGeneric<T> {
value: T;
constructor(value: T) {
this.value = value;
}
}
class ChildGeneric extends BaseGeneric<number> {
getValueSquared() {
return this.value * this.value;
}
}
// 使用示例
let child = new ChildGeneric(5);
console.log(child.getValueSquared()); // 输出: 25
四、泛型约束
有时候我们希望泛型类型满足一定的条件，这就需要用到泛型约束。
1. 使用接口进行泛型约束
我们可以定义一个接口，然后让泛型类型继承这个接口，这样泛型类型就必须包含接口中定义的属性或方法。
// TypeScript 技术栈
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // 现在我们可以访问 length 属性
return arg;
}
// 使用示例
let str = loggingIdentity("hello"); // 可以正常使用，因为字符串有 length 属性
// let num = loggingIdentity(123); // 报错，因为数字没有 length 属性
这里定义了一个接口 Lengthwise，它有一个 length 属性。泛型函数 loggingIdentity 的泛型类型 T 继承了 Lengthwise 接口，所以传入的参数必须有 length 属性。
2. 多个泛型约束
我们也可以对泛型类型施加多个约束。
// TypeScript 技术栈
interface Nameable {
name: string;
}
interface Ageable {
age: number;
}
function printPerson<T extends Nameable & Ageable>(person: T): void {
console.log(`Name: ${person.name}, Age: ${person.age}`);
}
// 使用示例
let person = { name: "John", age: 30 };
printPerson(person); // 输出: Name: John, Age: 30
这里泛型类型 T 同时继承了 Nameable 和 Ageable 两个接口，所以传入的参数必须同时包含 name 和 age 属性。
五、泛型的应用场景
1. 数据处理
在处理不同类型的数据时，泛型可以让我们编写通用的数据处理函数。比如，我们要对不同类型的数组进行排序。
// TypeScript 技术栈
function sortArray<T>(arr: T[]): T[] {
return arr.sort();
}
// 使用示例
let stringArray = ["banana", "apple", "cherry"];
let sortedStringArray = sortArray(stringArray);
console.log(sortedStringArray); // 输出: ['apple', 'banana', 'cherry']
let numberArray = [3, 1, 2];
let sortedNumberArray = sortArray(numberArray);
console.log(sortedNumberArray); // 输出: [1, 2, 3]
2. 组件开发
在前端开发中，我们经常会开发一些通用的组件，泛型可以让这些组件更加灵活。比如，我们要开发一个列表组件，它可以显示不同类型的数据。
// TypeScript 技术栈
interface ListProps<T> {
items: T[];
renderItem: (item: T) => JSX.Element;
}
function List<T>(props: ListProps<T>) {
return (
<ul>
{props.items.map((item, index) => (
<li key={index}>{props.renderItem(item)}</li>
))}
</ul>
);
}
// 使用示例
function renderStringItem(item: string) {
return <span>{item}</span>;
}
let stringList = <List<string> items={["one", "two", "three"]} renderItem={renderStringItem} />;
六、TypeScript 泛型的优缺点
1. 优点
- 代码复用性高：泛型可以让我们编写通用的代码，减少代码重复。比如上面的
sortArray函数，它可以对不同类型的数组进行排序，而不需要为每种类型都写一个排序函数。 - 类型安全：泛型可以在编译时检查类型错误，避免运行时出现类型相关的错误。比如在泛型函数中，我们可以明确知道返回值的类型，从而避免使用
any类型带来的类型丢失问题。 - 提高代码的可读性和可维护性：泛型让代码更加清晰，其他开发者可以更容易理解代码的功能和类型要求。
2. 缺点
- 学习成本较高：对于初学者来说，泛型的概念可能比较抽象，理解和使用起来有一定的难度。
- 代码复杂度增加：使用泛型会让代码变得更加复杂，尤其是在处理多个泛型类型和泛型约束时。
七、注意事项
1. 泛型类型变量的命名
泛型类型变量的命名通常使用单个大写字母，如 T、U、K 等，这样可以让代码更加简洁和规范。
2. 泛型约束的使用
在使用泛型约束时，要确保约束的合理性，避免过度约束导致代码的灵活性降低。
3. 类型推断
虽然 TypeScript 可以自动推断泛型类型，但在某些复杂的情况下，可能需要显式地指定泛型类型，以确保代码的正确性。
八、文章总结
TypeScript 泛型编程是一种强大的编程技术，它可以让我们写出更灵活、可复用的代码。通过泛型函数、泛型类和泛型约束，我们可以在不同的应用场景中使用泛型，提高代码的质量和可维护性。不过，泛型也有一定的学习成本和代码复杂度，在使用时需要注意泛型类型变量的命名、泛型约束的使用和类型推断等问题。希望通过这篇文章，你能对 TypeScript 泛型编程有更深入的理解，并且能够在实际开发中灵活运用泛型。
评论