在 TypeScript 中，泛型约束是一种强大的特性，可以以类型安全的方式在函数和类中使用。泛型约束可以使你的代码更加通用和灵活，提高代码的复用性和可维护性。
什么是泛型约束？
泛型约束是指，在函数或类中使用泛型类型时，可以限制该泛型类型必须是一个指定的类型或满足特定的约束条件。这样，就可以在编译时检查参数类型，避免类型错误和运行时错误。
例如，我们定义了一个函数，用于计算数组中元素的总和：
// javascriptcn.com 代码示例
function sum(arr: any[]): number {
let total = 0;
for (let i = 0; i < arr.length; i++) {
total += arr[i];
}
return total;
}
console.log(sum([1, 2, 3])); // 6
console.log(sum(['1', '2', '3'])); // '123'上面的函数在计算字符串数组的总和时会出现类型错误，因为字符串不能直接相加。为了解决这个问题，我们可以使用泛型约束。
如何使用泛型约束？
在 TypeScript 中，使用泛型约束可以通过在函数或类名后面添加尖括号 <> 来实现，其中尖括号中包含泛型类型。我们可以在泛型类型中定义泛型变量，用来接收传入的参数类型。
例如，我们可以将上面的函数改写为：
// javascriptcn.com 代码示例
function sum<T extends number | string>(arr: T[]): number {
let total = 0;
for (let i = 0; i < arr.length; i++) {
total += Number(arr[i]);
}
return total;
}
console.log(sum([1, 2, 3])); // 6
console.log(sum(['1', '2', '3'])); // 6上面的 sum 函数使用了泛型约束 T extends number | string，表示泛型变量 T 必须是 number 或 string 类型。这样，在函数中就可以使用类型安全的加法运算符 +，避免类型错误和运行时错误。
泛型类中使用泛型约束
除了在函数中使用泛型约束，我们还可以在类中使用泛型约束。例如，我们可以定义一个泛型队列类，用于存储任意类型的数据：
// javascriptcn.com 代码示例
class Queue<T> {
private items: T[] = [];
enqueue(item: T) {
this.items.push(item);
}
dequeue(): T | undefined {
return this.items.shift();
}
size(): number {
return this.items.length;
}
}
const queue = new Queue<string>();
queue.enqueue('foo');
queue.enqueue('bar');
queue.enqueue('baz');
console.log(queue.size()); // 3
console.log(queue.dequeue()); // 'foo'
console.log(queue.dequeue()); // 'bar'
console.log(queue.dequeue()); // 'baz'
console.log(queue.dequeue()); // undefined上面的泛型队列类使用了泛型约束 Queue<T>，表示泛型变量 T 可以是任何类型。这样，在使用时就可以方便地存储和获取队列中的数据。
总结
通过本文的学习，我们了解了 TypeScript 中如何使用泛型约束。泛型约束是一种强大的特性，可以使代码更加通用和灵活，提高代码的复用性和可维护性。我们可以在函数或类名后添加尖括号 <>，以定义泛型类型，从而限制泛型类型的范围或满足特定的约束条件。在实际开发中，我们应该经常使用泛型约束，以提高代码质量和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6531e7dc7d4982a6eb3f0bee