ts中的extends

extends关键字在ts中在不同场景代表的含义不一样:

• 表示继承
• 表示约束
• 表示分配(条件类型)

继承

  class Animal {
    say() {
      console.log('say');
    }
  }
  class Dog extends Animal {}
  const dog = new Dog();
  dog.say();

泛型约束

type C = <T extends { name: string }>(arg: T) => any;

  function fn(cb: C) {
    cb({ name: '回调' });
  }
  fn((arg) => {
    console.log(arg.name);
  });

条件类型

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

Bool的类型是 'yes'这是因为 Human 和 Duck 的类型完全相同，或者说 Human 类型的一切约束条件，Duck 都具备； 需要理解的是,这个A extends B 是指类型A可以分配给类型B, 而不是说类型A是类型B的子集.稍微扩展下来详细说明这个问题：

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

当我们给Human加上一个desc属性,发现此时Bool 是'no' 这是因为Duck没有类型为string的desc属性,类型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'>; // string | number

是不是很反直觉？这个反直觉结果的原因就是所谓的分配条件类型

对与使用extends关键字的条件类型（即上面的三元表达式类型），如果extends前面的参数是一个泛型类型,当传入改参数的是联合类型,则使用分配律计算最终的结果。分配律是指，将联合类型的联合项拆成单项，分别代入条件类型，然后将每个单项代入得到的结果再联合起来，得到最终的判断结果。

  type P<T> = T extends 'x' ? string : number;
  type A3 = P<'x' | 'y'>; // 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 Invoke<T> = T extends 'x' ? string : number;
  type A = Invoke<'x' | 'y'>; // string | number;

  type Invoke2<T> = [T] extends 'x' ? string : number;
  type A2 = Invoke2<'x' | 'y'>; // number

在条件判断类型的定义中,将泛型参数使用[ ]括号起来,即可阻断条件判断类型的分配,此时,传入参数T的类型将被当做一个整体，不再分配。

高级类型中的应用

• Exclude
  Exclude是TS中的一个高级类型，其作用是从第一个联合类型参数中，将第二个联合类型中出现的联合项全部排除，只留下没有出现过的参数.

实例

 type T0 = Exclude<'a' | 'b' | 'c', 'a'>; // b | c

Exclude的定义是

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

这个定义就利用了条件类型中的分配原则，来尝试将实例拆开看看发生了什么：

  type Diff<T, U> = T extends U ? never : T;
  type R = Diff<'a' | 'b', 'a'>; // "b"

  // 等价于
  type R1 = Diff<'a', 'a'>; // never
  type R2 = Diff<'b', 'a'>; // 'b'
  type R = R1 | R2;

• 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的属性。
参考: http://www.qb5200.com/article/541259.html