【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型

// 泛型约束
type Lengthwise<T> = T extends { length: number } ? T : never;
 
// 使用泛型约束
function loggingIdentity<T>(arg: T): T {
  console.log(arg.length);  // 错误：类型“T”上不存在属性“length”。
  return arg;
}
 
// 使用泛型约束来修复上述错误
function loggingIdentityWithConstraint<T extends { length: number }>(arg: T): T {
  console.log(arg.length);  // 正确：因为我们现在知道“T”包含属性“length”。
  return arg;
}
 
// 使用泛型约束的例子
loggingIdentityWithConstraint({ length: 10, value: 'Hello' });  // 正确，因为 { length: number } 是 { length: number, value: string } 的子类型
 
// 泛型接口
interface Lengthwise {
  length: number;
}
 
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);  // 正确，因为我们现在知道“T”包含属性“length”。
  return arg;
}
 
// 泛型接口的例子
loggingIdentity({ length: 10, value: 'Hello' });  // 正确，因为 { length: number, value: string } 符合 Lengthwise 接口。
 
// 泛型工具类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
 
// 泛型工具类型的例子
type FuncReturnType = ReturnType<() => string>;  // 类型为 string
 
// 使用泛型工具类型来获取函数返回类型
function identity<T>(arg: T): T {
  return arg;
}
 
type IdentityReturnType = ReturnType<typeof identity>;  // 类型为 T

这段代码展示了如何在TypeScript中使用泛型约束来对泛型参数进行约束，以及如何定义和使用泛型接口和泛型工具类型。泛型约束确保了泛型参数必须满足特定的形状或条件，泛型接口允许我们为接口创建可复用的约束，而泛型工具类型则可以用来获取函数的返回类型。这些概念有助于提高类型安全和代码复用性。