Typescript关键字extends总结【高级】

Typescript关键字extends总结【高级】已关闭评论

本文主要整理一下extends关键字在TS中的两种用法,即接口继承和条件判断。文章重点说明extends条件判断在ts中的特殊用法,以及尝试解释一些特殊示例。最后,举例说明extends在高级类型推断中的应用。

1. 接口继承

extends用来做继承功能,相信大家都不陌生,ES6的Class语法也是用它来做类的继承用。在TS中用法也类似,来看示例

 interface T1 {
    name: string
  }
  
  interface T2 {
    sex: number
  }
  
  // 多重继承,逗号隔开
  interface T3 extends T1,T2 {
    age: number
  }
  
  // 合法
  const t3: T3 = {
    name: 'xiaoming',
    sex: 1,
    age: 18
  }

示例中,T1和T2两个接口,分别定义了name属性和sex属性,T3则使用extends使用多重继承的方式,继承了T1和T2,同时定义了自己的属性age,此时T3除了自己的属性外,还同时拥有了来自T1和T2的属性。

2. 条件判断

普通用法

条件判断的用法,先直接看个例子

 // 示例1
  interface Animal {
    eat(): void
  }
  
  interface Dog extends Animal {
    bite(): void
  }
  
  // A的类型为string
  type A = Dog extends Animal ? string : number
  
  const a: A = 'this is string'

extends用来条件判断的语法和JS的三元表达是很相似,如果问号前面的判断为真,则将第一个类型string赋值给A,否则将第二个类型number赋值给A。

那么,接下来的问题就是,extends判断条件真假的逻辑是什么?

很简单,如果extends前面的类型能够赋值给extends后面的类型,那么表达式判断为真,否则为假

上面的示例中,Dog是Animal的子类,父类比子类的限制更少,能满足子类,则一定能满足父类,Dog类型的值可以赋值给Animal类型的值,判断为真。

再看一个例子:

  // 示例2
  interface A1 {
    name: string
  }

  interface A2 {
    name: string
    age: number
  }
  // A的类型为string
  type A = A2 extends A1 ? string : number
  
  const a: A = 'this is string'

A1,A2两个接口,满足A2的接口一定可以满足A1,所以条件为真,A的类型取string

到目前为止,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'// ?

A1和A2是extends条件判断的普通用法,和上面的判断方法一样。

P是带参数T的泛型类型,其表达式和A1,A2的形式完全相同,A3是泛型类型P传入参数'x' | 'y'得到的类型,如果将'x' | 'y'带入泛型类的表达式,可以看到和A2类型的形式是完全一样的,那是不是说明,A3和A2的类型就是完全一样的呢?

有兴趣可以自己试一试,这里就直接给结论了

  type P<T> = T extends 'x' ? string : number;
  type A3 = P<'x' | 'y'>  // A3的类型是 string | number

是不是很反直觉?这个反直觉结果的原因就是所谓的分配条件类型(Distributive Conditional Types)

When conditional types act on a generic type, they become distributive when given a union type

这句话翻译过来也还是看不懂,我直接上大白话了

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

还是用上面的例子说明

  type P<T> = T extends 'x' ? string : number;
  type A3 = P<'x' | 'y'>  // A3的类型是 string | number

该例中,extends的前参为T,T是一个泛型参数。在A3的定义中,给T传入的是’x’和’y’的联合类型'x' | 'y',满足分配律,于是’x’和’y’被拆开,分别代入P<T>

P<'x' | 'y'> => P<'x'> | P<'y'>

//'x'代入得到
'x' extends 'x' ? string : number => string

//'y'代入得到
'y' extends 'x' ? string : number => number


然后将每一项代入得到的结果联合起来,得到string | number

总之,满足两个要点即可适用分配律:第一,参数是泛型类型,第二,代入参数的是联合类型

  • 特殊的never
  // never是所有类型的子类型
  type A1 = never extends 'x' ? string : number// string

  type P<T> = T extends 'x' ? string : number;
  type A2 = P<never> // never

上面的示例中,A2和A1的结果竟然不一样,看起来never并不是一个联合类型,所以直接代入条件类型的定义即可,获取的结果应该和A1一直才对啊?

实际上,这里还是条件分配类型在起作用。never被认为是空的联合类型,也就是说,没有联合项的联合类型,所以还是满足上面的分配律,然而因为没有联合项可以分配,所以P<T>的表达式其实根本就没有执行,所以A2的定义也就类似于永远没有返回的函数一样,是never类型的。

  • 防止条件判断中的分配
  type P<T> = [T] extends ['x'] ? string : number;
  type A1 = P<'x' | 'y'// number
  type A2 = P<never> // string

在条件判断类型的定义中,将泛型参数使用[]括起来,即可阻断条件判断类型的分配,此时,传入参数T的类型将被当做一个整体,不再分配。

在高级类型中的应用

  • Exclude

Exclude是TS中的一个高级类型,其作用是从第一个联合类型参数中,将第二个联合类型中出现的联合项全部排除,只留下没有出现过的参数。

示例:

type A = Exclude<'key1' | 'key2''key2'// 'key1'

Exclude的定义是

type Exclude<T, U> = T extends U ? never : T

这个定义就利用了条件类型中的分配原则,来尝试将实例拆开看看发生了什么:

type A = `Exclude<'key1' | 'key2', 'key2'>`

// 等价于

type A = `Exclude<'key1', 'key2'>` | `Exclude<'key2', 'key2'>`

// =>

type A = ('key1' extends 'key2' ? never : 'key1') | ('key'2 extends 'key2' ? never : 'key2')

// =>

// never是所有类型的子类型
type A = 'key1' | never = 'key1'

  • Extract

高级类型Extract和上面的Exclude刚好相反,它是将第二个参数的联合项从第一个参数的联合项中提取出来,当然,第二个参数可以含有第一个参数没有的项。

下面是其定义和一个例子,有兴趣可以自己推导一下

type Extract<T, U> = T extends U ? T : never
type A = Extract<'key1' | 'key2''key1'// 'key1'

  • Pick

extends的条件判断,除了定义条件类型,还能在泛型表达式中用来约束泛型参数

// 高级类型Pick的定义
type Pick<T, K extends keyof T> = {
    [P in K]: T[P]
}

interface A {
    name: string;
    age: number;
    sex: number;
}

type A1 = Pick<A, 'name'|'age'>
// 报错:类型“"key" | "noSuchKey"”不满足约束“keyof A”
type A2 = Pick<A, 'name'|'noSuchKey'>

Pick的意思是,从接口T中,将联合类型K中涉及到的项挑选出来,形成一个新的接口,其中K extends keyof T则是用来约束K的条件,即,传入K的参数必须使得这个条件为真,否则ts就会报错,也就是说,K的联合项必须来自接口T的属性。

以上就是我总结出来的,extends关键字在TS中的应用,如有遗漏或错误,还请大家补充指正。

原文地址

  • https://juejin.cn/post/6998736350841143326

                     

❤️ 看完三件事

非常棒的一篇Ts实用文章,

如果你觉得这篇内容对你挺有启发,不妨:

  • 点个【在看】,或者分享转发,让更多的人也能看到这篇内容

  • 点击↓面关注我们,一起学前端

  • 长按↓面二维码,添加鬼哥微信,一起学前端



来源: 前端人