Typescript中的extends关键字

前言

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 的每一项可以是一个对象，但是必须含有类型为string的cname属性。再比如，redux 里 dispatch 一个 action，必须包含type属性：

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

条件类型与高阶类型