TypeScript - 泛型约束：释放灵活类型的强大力量

你好，未来的 TypeScript 巫师们！今天，我们将踏上一段令人兴奋的旅程，探索泛型约束的世界。如果你是编程新手，不用担心——我会成为你的友好向导，我们将一步一步地攻克这个主题。在本教程结束时，你将像专业人士一样限制泛型！

TypeScript - Generic Constraints

什么是泛型约束？

在我们深入了解之前，让我们从一个简单的类比开始。想象你有一个魔法盒子，可以容纳任何类型的物品。这在 TypeScript 中 essentially 就是一个泛型——一个不同类型的灵活容器。现在，如果我们想在放入这个盒子里的物品上设置一些规则，泛型约束就派上用场了！

泛型约束允许我们限制可以与我们的泛型一起使用的类型。这就好比在我们的魔法盒子上贴上一个标签，写着：“仅限具有 'length' 属性的对象！”

问题示例：为什么我们需要泛型约束？

让我们看看一些泛型约束可以拯救的情景：

示例 1：神秘的长度属性

function getLength<T>(item: T): number {
return item.length; // 错误：类型 'T' 上不存在 'length' 属性
}

哎呀！TypeScript 给我们报错了。为什么？因为并非所有类型都有 length 属性。如果我们传递一个数字给这个函数会怎样？数字没有长度！

示例 2：令人困惑的比较

function compareValues<T>(value1: T, value2: T): boolean {
return value1 > value2; // 错误：无法将 '>' 应用于类型 'T' 和 'T'
}

又是一个错误！TypeScript 不知道 T 是否可以使用 > 进行比较。如果我们传递字符串会怎样？或者复杂对象？

这些示例向我们展示了为什么我们需要泛型约束。它们帮助我们编写更精确且无错误的代码。

TypeScript 中的泛型约束如何工作

现在，让我们看看如何使用泛型约束来解决问题：

魔法的 `extends` 关键字

要添加约束，我们使用 extends 关键字。这就好比告诉 TypeScript：“嘿，这个类型至少必须具备这些属性或功能！”

让我们修复我们的 getLength 函数：

interface Lengthwise {
length: number;
}

function getLength<T extends Lengthwise>(item: T): number {
return item.length; // 没有错误了！
}

现在，让我们分解一下：

我们定义了一个接口 Lengthwise，它有一个 length 属性。
我们使用 <T extends Lengthwise> 来说 “T 必须至少拥有 Lengthwise 的属性”。
现在 TypeScript 知道无论 T 是什么，它肯定会有一个 length 属性！

让我们试一试：

console.log(getLength("Hello")); // 有效！字符串有长度
console.log(getLength([1, 2, 3])); // 有效！数组有长度
console.log(getLength(123)); // 错误！数字没有长度

这太棒了！我们成功限制了我们的泛型！

在泛型约束中使用类型参数

有时，我们希望根据另一个类型参数来限制一个类型参数。这就好比说：“这个盒子只能容纳与里面已有的物品兼容的物品。”

让我们来看一个例子：

function copyProperties<T extends U, U>(target: T, source: U): T {
for (let id in source) {
target[id] = source[id];
}
return target;
}

这里发生了什么？

我们有两个类型参数：T 和 U。
T extends U 意味着 T 至少必须拥有 U 的所有属性，但它可以有更多。
这允许我们从 source 复制属性到 target，同时知道 target 将拥有 source 的所有属性。

让我们看看它的实际应用：

interface Person {
name: string;
}

interface Employee extends Person {
employeeId: number;
}

let person: Person = { name: "Alice" };
let employee: Employee = { name: "Bob", employeeId: 123 };

copyProperties(employee, person); // 有效！
copyProperties(person, employee); // 错误！Person 没有 employeeId

实际应用和最佳实践

现在我们理解了泛型约束是如何工作的，让我们看看一些实际应用和最佳实践：

约束为对象类型：通常，你会想要确保你正在处理的是对象：

function cloneObject<T extends object>(obj: T): T {
return { ...obj };
}

约束为函数类型：你可以确保一个类型是可调用的：

function invokeFunction<T extends Function>(func: T): void {
func();
}

约束为特定属性：确保对象具有特定的属性：

function getFullName<T extends { firstName: string; lastName: string }>(obj: T): string {
return `${obj.firstName} ${obj.lastName}`;
}

多个约束：你可以使用 & 运算符应用多个约束：

function processData<T extends number & { toFixed: Function }>(data: T): string {
return data.toFixed(2);
}

下面是一个总结这些方法的表格：

方法	描述	示例
对象约束	确保类型是对象	`<T extends object>`
函数约束	确保类型是可调用的	`<T extends Function>`
属性约束	确保类型具有特定属性	`<T extends { prop: Type }>`
多个约束	结合多个约束	`<T extends TypeA & TypeB>`