在 TypeScript 中，泛型是非常重要的一种类型定义方式，它可以让我们定义更灵活的类型，并且能够提供一定的类型检查能力。但是在使用泛型的时候，我们有时候需要对泛型进行一些约束，以确保泛型的类型满足一定的条件。本文将介绍 TypeScript 中的泛型约束，包括如何使用约束和约束的注意事项。
如何使用泛型约束
在 TypeScript 中，我们可以通过 extends 关键字来对泛型进行约束。extends 关键字用于约束泛型的类型必须是另一个类型的子类型。例如，我们可以定义一个泛型函数，这个函数接受一个参数，并返回这个参数的长度。这个泛型函数的类型可以用以下方式表示：
function getLength<T extends { length: number }>(arg: T): number {
return arg.length;
}在上面的例子中，我们使用 <T extends { length: number }> 的方式来约束泛型 T 的类型必须满足 { length: number } 这个结构。这个结构表示 T 必须包含一个 length 属性，这个 length 属性的类型必须是 number。
我们可以使用这个泛型函数来获取字符串和数组的长度，因为字符串和数组都包含 length 属性，并且这个 length 属性的类型都是 number。例如：
console.log(getLength('hello')); // 输出 5
console.log(getLength([1, 2, 3])); // 输出 3但是如果我们传入一个不包含 length 属性的对象，或者包含 length 属性但是类型不是 number，那么 TypeScript 就会给出编译错误。
console.log(getLength(123)); // 编译错误，类型 "number" 没有 length 属性
console.log(getLength({ name: 'test', length: '5' })); // 编译错误，属性 length 的类型不是 number通过使用泛型约束，我们可以限制泛型的类型范围，从而确保泛型的类型满足一定的条件。
注意事项
在使用泛型约束的时候，有几个需要注意的地方。
约束类型的优先级
当使用泛型约束的时候，约束的类型会覆盖其他类型。也就是说，如果传入的类型既满足泛型约束，又满足其他技术定义的类型，那么泛型约束的类型会被优先选用。例如：
-- -------------------- ---- ------- --------- ---------- - ------- ------- - -------- ----------- ------- ---------------- --- ------ - ------ ----------- - -------- -------------------- -------- ------ - ------ ----------- - -------------------------------- -- -- - -------------------------------------- -- -- -
在上面的例子中，我们定义了一个 interface Lengthable，它包含一个 length 属性。然后我们定义了一个泛型函数 getLength，使用泛型约束 T extends Lengthable 来约束泛型 T 必须满足 Lengthable 这个接口的结构。最后，我们定义了一个普通的函数 getStringLength，这个函数接受一个字符串参数，并返回这个字符串的长度。
在调用 getLength 和 getStringLength 函数时，我们传入的都是字符串参数。由于字符串类型同时满足 Lengthable 这个接口的结构，所以两个函数都可以正常执行，并返回相同的字符串长度。
但是，如果我们传入一个不满足 Lengthable 这个接口结构的类型，比如数字类型，那么 getLength 函数就会执行失败，而 getStringLength 函数则可以正常执行。
约束的类型必须符合使用场景
在使用泛型约束的时候，需要注意约束的类型必须符合函数或者类使用的场景。例如，如果我们定义了一个泛型函数，这个函数接受一个对象参数，并返回这个对象的属性值。我们可以使用以下方式定义这个函数：
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}在这个例子中，我们使用 <T, K extends keyof T> 的方式来定义泛型 T 和 K 的类型，其中 K extends keyof T 表示 K 的类型必须是 T 对象的属性名称。
但是，如果我们传入一个不存在 obj 对象中的属性名称，那么 TypeScript 在编译时就无法检查出错误，而是在运行时抛出错误。例如：
console.log(getProperty({ name: 'test' }, 'age')); // 运行时错误，对象中不存在 age 属性在这种情况下，我们可以对 getProperty 函数进行修改，增加对属性名称的检查约束。例如，我们可以使用 conditional type 的方式对属性名称进行检查，如果该属性名称不存在于 T 对象中，就返回一个错误类型。具体的实现可以参考以下代码：
-- -------------------- ---- -------
---- ----------- -- - - -- - - ------ -
------ -- - ------- - - - - -- -------
------ -- - ------- - - - - -- - - - --
---- ----------- -- - ------- ------------- -- ----
---- ------------ - ------------
-------- -------------- - ------- ----- ------- -- ---- --
- ---------
- -- -- --- ---- --
----------- ---
-------------
----
- -
-- ------------------------- -
------ ---------
- ---- -
------ ----------- -- -------------
-
-在上面的代码中，我们使用了 IfEquals，Excludes 和 ErrorMessage 三个类型定义。IfEquals 是一种条件类型，用于返回满足条件的类型。Excludes 是一种类型定义，用于从 T 对象中排除一个或多个属性名称。ErrorMessage 是一种错误类型，用于在满足不了条件的时候返回一个错误。
使用以上代码定义的 getProperty 函数，当我们传入一个不存在于对象中的属性名称时，TypeScript 将会在编译时给出一个编译错误，从而避免了运行时错误。
结论
在 TypeScript 中，泛型约束是一种非常重要的类型定义方式。它可以帮助我们定义更加灵活的类型，并且能够提供一定的类型检查能力。但是在使用泛型约束的时候，我们需要注意约束的类型必须符合使用场景，并且需要考虑约束类型的优先级。通过深入理解泛型约束的特性和注意事项，我们可以更好地使用泛型约束，让 TypeScript 带来更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef7f526fbf9601972f8801