Typescript中的extends关键字

前言

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

• 表示继承/拓展的含义
• 表示约束的含义
• 表示分配的含义

基本使用

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

• 继承父类的方法和属性

代码语言：javascript复制

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 继承值，还可以继承/扩展类型：

代码语言：javascript复制

 interface Animal {
   kind: string;
 }

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

泛型约束

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

条件类型与高阶类型

代码语言：javascript复制

SomeType extends OtherType ? TrueType : FalseType;

When the type on the left of the extendsis assignable 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还有一大用途就是用来判断一个类型是不是可以分配给另一个类型，这在写高级类型的时候非常有用，举个