Ts extends 泛型约束

本文探讨了 TypeScript 中 `extends` 关键字在泛型约束和条件类型中的应用。通过示例解释了如何使用 `extends` 来确保传入参数符合特定属性要求,并展示了如何判断一个类型是否可以赋值给另一个类型。同时,文章还介绍了条件类型的三元表达式,以及当泛型类型为联合类型时,如何利用分配律计算结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

extends 泛型约束

我们一般使用extends来继承接口或者类,但是extends还可以用来泛型约束

function getCnames<T extends { name: string }>(entities: T[]):string[] {
  return entities.map(entity => entity.cname)
}

比如,以上代码对传入的参数进行了约束,传入的参数必须要有name这个属性,否则就会出错

条件类型与高阶类型

extends还有一大用途就是用来判断一个类型是不是可以分配给另一个类型,这在写高级类型的时候非常有用,举个例子

  type Lihua = {
    name: string;
  }
  type Xiaoming = {
    name: string;
  }
  type Bool = Lihua extends Xiaoming ? 'yes' : 'no'; // Bool => 'yes'

LihuaXiaoming这两个类型都有name这个属性,而且类型是相同的,所以最后的结果是yes

  type Human = {
    name: string;
    occupation: string;
  }
  type Duck = {
    name: string;
  }
  type Bool = Duck extends Human ? 'yes' : 'no'; // Bool => 'no'

而这段代码中,Duck中并不存在Human中相关属性,所以Duck不满足约束条件,所以最后返回的是no

当我们给Human加上一个occupation属性,发现此时Bool'no',这是因为 Duck 没有类型为stringoccupation属性,类型Duck不满足类型Human的类型约束。因此,A extends B,是指类型A可以分配给类型B,而不是说类型A是类型B的子集,理解extends在类型三元表达式里的用法非常重要。

  type A1 = 'x' extends 'x' ? string : number; // string
  type A2 = 'x' | 'y' extends 'x' ? string : number; // number
  
  type P<T> = T extends 'x' ? string : number;
  type A3 = P<'x' | 'y'> // string | number

P是带参数T的泛型类型,其表达式和A1,A2的形式完全相同,A3是泛型类型P传入参数'x' | 'y'得到的类型

对于使用extends关键字的条件类型(即上面的三元表达式类型),如果extends前面的参数是一个泛型类型,当传入该参数的是联合类型,则使用分配律计算最终的结果。分配律是指,将联合类型的联合项拆成单项,分别代入条件类型,然后将每个单项代入得到的结果再联合起来,得到最终的判断结果。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值