TS编程中extends关键字表示什么,有哪些应用
Admin 2022-09-02 群英技术资讯 352 次浏览
表示继承/拓展的含义
表示约束的含义
表示分配的含义
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 的每一项可以是一个对象,但是必须含有类型为string
的cname
属性。再比如,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 theextends
isassignable to the one on the right
, then you’ll get the type in the first branch (the “true” branch); otherwise you’ll get the type in the latter branch (the “false” 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 没有类型为string
的occupation
属性,类型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是所有类型的子类型 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
是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
和上面的Exclude
刚好相反,它是将第二个参数的联合项从第一个参数的联合项中提取出来
,当然,第二个参数可以含有第一个参数没有的项。
下面是其定义和一个例子,有兴趣可以自己推导一下
type Extract<T, U> = T extends U ? T : never type A = Extract<'key1' | 'key2', 'key1'> // 'key1'
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的属性。
以上就是ts中 extends
关键字的常用场景。
https://www.typescriptlang.org/docs/handbook/2/classes.html#extends-clauses
https://www.typescriptlang.org/docs/handbook/2/objects.html#extending-types
https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints
https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-inference-in-conditional-types
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要为大家详细介绍了JavaScript实现二级菜单的制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要介绍了ElementUI下拉框选择后不显示值问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
本篇文章给大家带来了关于JavaScript的相关知识,其中主要整理了数据处理的相关问题,包括了数据的增删改查、数据的排序去重等等内容,下面一起来看一下,希望对大家有帮助。
three.js镜头追踪移动的实现难点有哪些?在实际项目的操作过程或是学习过程中,不少人都会遇到这样的问题,接下来就让小编带大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
今天给大家简单的介绍一下元编程,那么元编程是什么呢?都有哪些元编程?接下来我们就一起来了解看看,本文示例对大家学习元编程有一定的帮助,大家可以参考。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008