文章目录
TypeScript 是 JavaScript 的超集，具备强类型检查功能和丰富的类型系统。泛型是 TypeScript 中非常重要的特性之一，能够为代码提供强大的类型安全性和复用性。本文将详细介绍泛型中的类型参数使用，特别是类型参数在约束中的应用、泛型参数默认值的设置，以及更高级的协变与逆变机制，帮助开发者深入理解泛型在复杂场景中的运用。
一、泛型中的类型参数约束
泛型允许我们编写能够处理多种类型的函数或类。为了让泛型更加安全，TypeScript 允许我们对类型参数进行约束，确保类型之间的关系满足特定条件。
1. 基础示例：获取对象的属性
假设我们想编写一个函数，根据属性名从对象中获取相应的属性值。我们希望确保函数只能访问对象中存在的属性，否则会报错。通过使用类型参数的约束，我们可以轻松实现这个目标。
function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
return obj[key];
}
let x = {
a: 1, b: 2, c: 3, d: 4 };
getProperty(x, "a"); // 正常工作
getProperty(x, "m"); // 错误：类型“'m'”不可分配给参数类型“'a' | 'b' | 'c' | 'd'”。
在这个例子中，我们定义了一个泛型函数 getProperty，它接受两个类型参数：Type 和 Key。其中，Key 被约束为 Type 的键值，确保 key 参数只能是对象 Type 中实际存在的属性。这样，代码就不会意外地获取到不存在的属性。
2. 进一步扩展：类型推断和约束
在 TypeScript 中，类型推断会自动确定类型参数，而不需要开发者显式传递。这使得代码更加简洁。在实际开发中，我们还可以在需要时进一步扩展泛型函数的约束条件。
二、在类中的泛型约束
在使用泛型时，类与接口同样可以应用泛型约束。下面我们来看一个通过构造函数创建实例的工厂函数示例，以及如何结合泛型约束在类中使用泛型。
1. 工厂函数创建类实例
在 TypeScript 中，工厂函数通常会涉及类的构造函数类型。我们可以通过泛型创建工厂函数来返回某个类的实例。
function create<Type>(c: {
new (): Type }): Type {
return new c();
}
该代码片段展示了一个简单的工厂函数 create，它接受一个构造函数，并返回该构造函数的实例。这种方式可以确保我们在调用 create 时，返回的对象具有预期的类型。
2. 更复杂的示例：结合类的原型
为了进一步理解泛型约束，我们可以使用类的 prototype 属性来推断和约束构造函数与类实例之间的关系。下面是一个更复杂的例子，展示了如何通过泛型约束构建动物园管理系统。
class BeeKeeper {
hasMask: boolean = true;
}
class ZooKeeper {
nametag: string = "Mikle";
}
class Animal {
numLegs: number = 4;
}
class Bee extends Animal {
numLegs = 6;
keeper: BeeKeeper = new BeeKeeper();
}
class Lion extends Animal {
keeper: ZooKeeper = new ZooKeeper();
}
function createInstance<A extends Animal>(c: new () => A): A {
return new c();
}
createInstance(Lion).keeper.nametag; // Mikle
createInstance(Bee).keeper.hasMask; // true
在这个例子中，我们使用了泛型约束来确保 createInstance 函数只能创建 Animal 类型的实例。同时，通过使用类的原型（keeper 属性），我们可以推断出不同的动物类型对应的饲养员类型。
三、泛型参数默认值
当泛型具有多个类型参数时，TypeScript 允许我们为其中某些参数设置默认值。这可以减少我们在使用泛型时必须显式传递的类型参数数量，提升代码的灵活性和可读性。
1. 示例：创建 HTML 元素
以下是一个使用泛型参数默认值的例子，展示了如何通过泛型创建 HTML 元素，并根据传递的参数动态生成不同类型的元素。
declare function create<T extends HTMLElement = HTMLDivElement, U extends HTMLElement[] = T[]>(
element?: T,
children?: U
): Container<T, U>;
const div = create(); // 默认创建 HTMLDivElement
const p = create(new HTMLParagraphElement()); // 创建 HTMLParagraphElement
在此示例中，我们为泛型 T 和 U 设置了默认值。如果用户不传递任何参数，函数会默认创建一个 HTMLDivElement；如果传递了特定元素类型，则生成相应类型的元素。
2. 泛型参数默认值的规则
泛型参数默认值的规则如下：
- 如果类型参数有默认值，则该类型参数是可选的。
- 所有必需的类型参数必须位于可选类型参数之前。
- 如果有约束，类型参数的默认类型必须满足该约束。
四、协变与逆变
协变（covariance）和逆变（contravariance）是类型理论中的两个重要概念，用于描述泛型类型之间的关系。
1. 协变示例
协变是指，当一个类型 T 是另一个类型 U 的子类型时，Producer<T> 也是 Producer<U> 的子类型。例如，假设有一个 Producer<T> 接口，它表示能够生产某种类型的对象：
interface Producer<T> {
make(): T;
}
const catProducer: Producer<Cat> = {
make: () => new Cat(),
};
const animalProducer: Producer<Animal> = catProducer; // 协变：Cat 是 Animal 的子类型
2. 逆变示例
逆变是指，如果 T 是 U 的子类型，则 Consumer<U> 是 Consumer<T> 的子类型。例如，有一个 Consumer<T> 接口，表示可以消费某种类型的对象：
interface Consumer<T> {
consume: (arg: T) => void;
}
const animalConsumer: Consumer<Animal> = {
consume: (animal: Animal) => {
console.log(animal);
},
};
const catConsumer: Consumer<Cat> = animalConsumer; // 逆变：Animal 可以被 Cat 消费
3. TypeScript 中的自动推断
TypeScript 是结构化类型系统，因此协变和逆变是自动推断的，开发者通常无需显式定义。然而，在某些复杂场景中，我们可能会希望通过变异注解（variance annotation）来明确指定类型参数的变异行为。
五、结论
TypeScript 的泛型系统强大而灵活，为开发者提供了许多方式来约束和推断类型关系。通过对类型参数的约束、默认值、以及协变与逆变的深入理解，开发者可以在实际项目中编写出更加安全、健壮的代码。无论是函数、类还是接口，泛型都为代码的重用性和类型安全性提供了强有力的支持。
推荐：
