Typescript中extends关键字的基本使用

作者:落落落落克 时间:2024-06-18 01:03:50 

前言

extends关键字在TS编程中出现的频率挺高的,而且不同场景下代表的含义不一样,特此总结一下:

表示继承/拓展的含义

表示约束的含义

表示分配的含义

基本使用

extends是 ts 里一个很常见的关键字,同时也是 es6 里引入的一个新的关键字。在 js 里,extends一般和class一起使用,例如:

  • 继承父类的方法和属性

class Animal {
 kind = 'animal'
 constructor(kind){
   this.kind = kind;
 }
 sayHello(){
   console.log(`Hello, I am a ${this.kind}!`);
 }
}

class Dog extends Animal {
 constructor(kind){
   super(kind)
 }
 bark(){
   console.log('wang wang')
 }
}

const dog = new Dog('dog');
dog.name; //  => 'dog'
dog.sayHello(); // => Hello, I am a dog!

这里 Dog 继承了父类的 sayHello 方法,因为可以在 Dog 实例 dog 上调用。

  • 继承某个类型

在 ts 里,extends除了可以像 js 继承值,还可以继承/扩展类型:

interface Animal {
  kind: string;
}

interface Dog extends Animal {
  bark(): void;
}
// Dog => { name: string; bark(): void }

泛型约束

在书写泛型的时候,我们往往需要对类型参数作一定的限制,比如希望传入的参数都有 name 属性的数组我们可以这么写:

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

这里extends对传入的参数作了一个限制,就是 entities 的每一项可以是一个对象,但是必须含有类型为stringcname属性。再比如,redux 里 dispatch 一个 action,必须包含 type属性:

interface Dispatch<T extends { type: string }> {
 (action: T): T
}

条件类型与高阶类型

SomeType extends OtherType ? TrueType : FalseType;

When the type on the left of the extendsis assignable to the one on the right, then you&rsquo;ll get the type in the first branch (the &ldquo;true&rdquo; branch); otherwise you&rsquo;ll get the type in the latter branch (the &ldquo;false&rdquo; branch).

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

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

在 vscode 里或者 ts playground 里输入这段代码,你会发现 Bool 的类型是'yes'。这是因为 Human 和 Duck 的类型完全相同,或者说 Human 类型的一切约束条件,Duck 都具备;换言之,类型为 Human 的值可以分配给类型为 Duck 的值(分配成功的前提是,Duck里面得的类型得有一样的),反之亦然。需要理解的是,这里A extends B,是指类型A可以分配给类型B,而不是说类型A是类型B的子集。稍微扩展下来详细说明这个问题:

type Human = {
   name: string;
   occupation: string;
 }
 type Duck = {
   name: string;
 }
 type Bool = Duck extends Human ? 'yes' : 'no'; // Bool => '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'> // ?

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前面的参数是一个泛型类型,当传入该参数的是联合类型,则使用分配律计算最终的结果。分配律是指,将联合类型的联合项拆成单项,分别代入条件类型,然后将每个单项代入得到的结果再联合起来,得到最终的判断结果。

If we plug a union type into ToArray, then the conditional type will be applied to each member of that union.

还是用上面的例子说明

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的属性。

来源:https://blog.csdn.net/qq_34998786/article/details/12030036

标签:ts,extends,关键字
0
投稿

猜你喜欢

  • 简单探讨一下python线程锁

    2021-03-24 12:06:54
  • python通过Seq2Seq实现闲聊机器人

    2021-09-02 13:39:15
  • 介绍Python的Django框架中的QuerySets

    2021-04-19 18:58:32
  • ES5学习教程之Array对象

    2024-04-17 10:09:17
  • MySql带OR关键字的多条件查询语句

    2024-01-21 22:39:25
  • Windows10下安装配置 perl 环境的详细教程

    2022-11-17 01:46:32
  • python支持多继承吗

    2023-10-14 11:22:48
  • MySQL忘记root密码错误号码1045的解决办法

    2024-01-20 17:00:43
  • Python 可爱的大小写

    2021-05-15 12:34:18
  • Python银行系统实战源码

    2022-05-14 14:16:56
  • Python 实现定积分与二重定积分的操作

    2023-08-05 18:22:27
  • 最长用最基本的MSSQL数据库备份与还原

    2024-01-17 18:23:07
  • 超轻量级MSXML多功能测试程序

    2009-05-19 12:38:00
  • Oracle数据库处理多媒体信息

    2010-07-16 13:01:00
  • SQL Server导入导出数据方法

    2007-08-17 09:50:00
  • JS组件Bootstrap实现弹出框和提示框效果代码

    2023-07-02 05:25:13
  • asp中获取当前月份距离以前某个时间的月份数

    2012-11-30 20:29:40
  • XML DOM介绍和例子

    2007-10-15 20:23:00
  • django将数组传递给前台模板的方法

    2023-09-26 09:06:40
  • 垂直栅格与渐进式行距(上)

    2009-04-01 18:30:00
  • asp之家 网络编程 m.aspxhome.com