阅读 55

Typescript关键字之extends

基本使用

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 }
复制代码

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

  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 的值,反之亦然。需要理解的是,这里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在类型三元表达式里的用法非常重要。

泛型约束

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

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 { typestring }> {
  (action: T): T
}
复制代码

类型判断与高阶类型

如上面提到的,将 extends 用在类型的三元表达式里,用来动态判断传入的类型是否满足某一条件,这种用法对于书写高阶类型非常有用,比如 Extract 类型:

type Extract<T, U> = K extends U ? T : never;
复制代码

这里Extract的给你就是提取出T中可以分配给U的类型,一般会用来提取联合类型的公共部分,比如两个对象的 key 的交集。比如:

type CommonKeys = Extract<'a''b' | 'c''d'|'c'// => 'c'
复制代码

当然复杂类型也可以:

type Obj = Extract<
  string[] | boolean | string,
  number | string | string[] | void
// string | string[]
复制代码

下面我们来一起看看一个常用的高阶类型 Omit 如何利用 extends 实现的。首先 Omit接收两个泛型参数,第一个是目标对象,第二个是需要剔除的属性 key:

interface Men {
  sex: 'male';
  age: number;
  lover: Men;
}

type Boy = Omit<Men, 'lover'>; // { sex: 'male'; age: number; }
复制代码

这里利用Omit剔除了Men中的lover属性得到了新的类型Boy,其源码实现如下:

/**
 * Exclude from T those types that are assignable to U
 */

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

/**
 * Construct a type with the properties of T except for those in type K.
 */

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
复制代码

首先利用extends实现一个剔除属性部分key的类型 Exclude,思路和上面的Extract类似,只不过是把满足约束条件的返回never,从而达到剔除的目的。然后利用另一个高阶类型 Pick,把剩余满足条件的属性从目标对象里提取出来。

以上就是ts中 extends 关键字的常用场景。

文章分类
前端
文章标签