文章目录
TypeScript 是一种基于 JavaScript 的强类型编程语言，具有丰富的类型系统，泛型（Generic）是 TypeScript 中非常强大且灵活的功能之一。通过使用泛型，开发者可以编写能够适用于多种数据类型的代码，极大提升了代码的可复用性和可扩展性。本文将详细介绍 TypeScript 中的泛型，包括泛型函数、泛型接口、泛型类以及泛型约束的使用方法。
一、泛型函数的基本概念
1. 什么是泛型函数？
泛型函数是指一种能够处理不同类型数据的函数。在定义函数时，我们通常会指定参数和返回值的类型。然而，如果我们希望函数能够处理多种类型的数据，就需要使用泛型。泛型允许我们在函数、接口或类定义时暂时指定类型，并在函数调用时传入具体的类型。
例如，以下是一个简单的泛型函数 identity，它可以接受任何类型的参数，并返回相同类型的值：
function identity<Type>(arg: Type): Type {
return arg;
}
在上述代码中，Type 是一个泛型变量，表示该函数可以处理任意类型的数据。在函数调用时，我们可以明确指定类型：
let output = identity<string>("hello");
也可以让 TypeScript 自动推断类型：
let output = identity("world");
2. 泛型函数的类型定义
与普通函数类似，泛型函数的类型定义也可以包含类型参数。以下代码展示了如何定义一个带有类型参数的泛型函数类型：
let myIdentity: <Type>(arg: Type) => Type = identity;
在这个例子中，我们使用了箭头函数语法来定义泛型函数的类型。在实际使用中，TypeScript 会根据函数的调用情况自动推断类型，减少显式的类型定义工作。
3. 使用不同的泛型参数名
尽管我们常用 Type 作为泛型参数名，但实际上可以使用任何合法的标识符，只要保持类型变量数量和顺序一致。例如，下面代码将泛型参数名改为 Input，但其功能与之前的代码完全相同：
let myIdentity: <Input>(arg: Input) => Input = identity;
4. 对象字面量中的泛型类型
除了使用函数声明外，我们还可以通过对象字面量的形式为泛型函数定义类型签名：
let myIdentity: {
<Type>(arg: Type): Type } = identity;
这种方法将泛型函数的类型封装在对象字面量中，适合在定义更复杂的类型结构时使用。
二、泛型接口
1. 定义泛型接口
在 TypeScript 中，接口不仅可以用于定义对象的形状，还可以用于泛型定义。我们可以通过泛型接口将类型参数应用于整个接口，从而让接口中的所有成员共享同一个类型参数。
以下代码展示了如何将对象字面量中的泛型函数提取到接口中：
interface GenericIdentityFn {
<Type>(arg: Type): Type;
}
function identity<Type>(arg: Type): Type {
return arg;
}
let myIdentity: GenericIdentityFn = identity;
在这个例子中，GenericIdentityFn 接口定义了一个泛型函数签名，myIdentity 变量则被赋予了这个泛型函数的类型。
2. 泛型参数放在接口层级
有时，我们希望泛型参数不仅仅用于单个函数，而是用于整个接口的所有成员。这种情况下，可以将类型参数放在接口的声明处，使其适用于整个接口：
interface GenericIdentityFn<Type> {
(arg: Type): Type;
}
let myIdentity: GenericIdentityFn<number> = identity;
在这个例子中，GenericIdentityFn 是一个泛型接口，它接收一个类型参数 Type，该参数用于接口内的函数签名。myIdentity 现在是一个具体的 number 类型的函数。
三、泛型类
1. 定义泛型类
与泛型接口类似，泛型类允许我们在类的定义中使用类型参数，从而让类能够处理多种类型。泛型类的定义形式与泛型接口类似，只是在类名之后加上类型参数：
class GenericNumber<NumType> {
zeroValue: NumType;
add: (x: NumType, y: NumType) => NumType;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
};
在这个例子中，GenericNumber 类定义了一个泛型 NumType，用于类中的属性和方法。实例化时，我们指定类型为 number，因此类中的 zeroValue 和 add 方法都操作 number 类型的数据。
2. 泛型类的灵活性
泛型类并不限于操作数字类型。我们可以使用其他类型来实例化泛型类，例如字符串类型：
let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function (x, y) {
return x + y;
};
console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));
在这个例子中，我们使用字符串类型实例化了 GenericNumber 类，表明泛型类具有很强的灵活性，可以适用于多种类型的数据。
3. 静态成员与泛型
需要注意的是，泛型类的类型参数只对实例部分有效，而不能应用于静态成员。因为静态成员属于类本身，而不是类的实例，因此无法与实例的类型参数关联。
四、泛型约束
1. 为什么需要泛型约束？
在某些情况下，我们希望泛型函数不仅适用于所有类型，还需要约束类型具备某些特定的属性或方法。例如，假设我们需要编写一个泛型函数来处理带有 length 属性的对象：
function loggingIdentity<Type>(arg: Type): Type {
console.log(arg.length); // 错误：类型 'Type' 上不存在属性 'length'
return arg;
}
由于并非所有类型都具有 length 属性，编译器会报错。此时，我们可以通过泛型约束来限制 Type 必须是具备 length 属性的类型。
2. 使用接口进行约束
我们可以通过定义一个包含 length 属性的接口，并使用 extends 关键字将泛型参数限制为实现该接口的类型：
interface Lengthwise {
length: number;
}
function loggingIdentity<Type extends Lengthwise>(arg: Type): Type {
console.log(arg.length);
return arg;
}
在这个例子中，Type 必须是实现了 Lengthwise 接口的类型，因此它必定拥有 length 属性。现在我们可以安全地访问 length 属性，而不会引发编译错误。
3. 泛型约束的实际应用
使用泛型约束可以使函数更加灵活和安全。例如，我们可以将 loggingIdentity 函数应用于字符串或数组等具备 length 属性的类型，但不能应用于没有 length 属性的类型：
loggingIdentity({
length: 10, value: 3 }); // 正常
loggingIdentity(3); // 错误：'number' 类型没有 'length' 属性
五、总结
通过本文的介绍，我们详细探讨了 TypeScript 中泛型的使用场景和实现方式。泛型是 TypeScript 中强大的工具，它不仅可以提升代码的可复用性，还能在类型安全的前提下提供更大的灵活性。掌握泛型的使用对于开发健壮且易维护的 TypeScript 应用至关重要。在日常开发中，合理使用泛型函数、泛型接口和泛型类，可以让我们的代码在不同的场景中表现出色。
推荐：
