TypeScript中的extends

3,229 阅读5分钟

extends关键字在TS类型编程中出现的频率非常之高,并且在不同的类型场景下表现出的特性是不一样的,因此在这里总结一下:

  • 继承/拓展
  • 约束
  • 分配

使用场景

class类中

class Animal {
  public kind = 'animal'
  constructor(kind) {
    this.kind = kind
  }
  say() {
    console.log(`I am ${this.kind}`)
  }
}

class Cat extends Animal {
  constructor(kind) {
    super(kind)
  }
  bark() {
    console.log('miao miao ~~~')
  }
}

const cat = new Cat('cat')
cat.kind // => 'cat'
cat.say() // I am cat

上面的cat继承了Animal的say方法,所以在Cat的实例对象上调用say方法会去父类Animal上调用

泛型约束

function loggingIdentity<Type>(arg: Type): Type {
  console.log(arg.length);
  // Property 'length' does not exist on type 'Type'.
  return arg;
}
interface Lengthwise {
  length: number;
}
 
function loggingIdentity<Type extends Lengthwise>(arg: Type): Type {
  console.log(arg.length); // Now we know it has a .length property, so no more error
  return arg;
}

// error Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.
loggingIdentity(3);

// ok
loggingIdentity({ length: 10, value: 3 });

条件类型

SomeType extends OtherType ? TrueType : FalseType;

当extends左边的类型可分配给右边的类型时,那么你将在第一个分支(“true”分支)中获得该类型;否则,您将在后面的分支(“false”分支)中获得类型。

interface Animal {
  live(): void;
}
interface Dog extends Animal {
  woof(): void;
}
 
type Example1 = Dog extends Animal ? number : string; // number
 
type Example2 = RegExp extends Animal ? number : string; // string

深入理解左边类型可分配给右边类型:

type Human = {
  name: string;
}
type lookasHuman = {
  name: string;
}
type Bool = lookasHuman extends Human ? 'yes' : 'no'; // Bool => 'yes'
type Human = {
  name: string;
}
type lookasHuman = {
  name: string;
  age: number;
}
type Bool = lookasHuman extends Human ? 'yes' : 'no'; // Bool => 'yes'

代码运行后为yes 也就是说lookasHuman extends Human为true,即左侧类型满足可以分配给右侧类型这个条件。换句话说就是lookasHuman 满足Human 的一切约束条件。这里的A extends B是指类型A可以分配给类型B,而不是说类型A是类型B的子集

type Human = {
  name: string;
  age: number
}
type lookasHuman = {
  name: string;
}
type Bool = lookasHuman extends Human ? 'yes' : 'no'; // Bool => 'no'

上面lookasHuman 中没有age属性 不满足Human 的约束条件

高阶类型

type A1 = 'x' extends 'x' ? string : number // string
type A2 = 'x' | 'y' extends 'x' ? string : number // number
type A3 = 'y' | 'x' extends 'x' ? string : number // number
type A4 = 'y' extends 'x' | 'y' ? string : number // string
type A5 = 'y' | 'x' extends 'x' | 'y' ? string : number // string

type P<T> = T extends 'x' ? string : number
type B = P<'x' | 'y'> // string | number

A1的extends: 就是条件类型的普通用法

A2~A5的extends: 如果extends前面或者后面或者都是union类型 前面的类型为后面类型的子集。这里的A extends B是指类型A是类型B的子集

接下来看B的extends:

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.(如果将联合类型插入到ToArray中,则条件类型将应用于该联合的每个成员。)

type ToArray<Type> = Type extends string ? string : number;
 
type StrArrOrNumArr = ToArray<string | number>;

上面extends前面是泛型变量Type,给Type传入的是string|number的联合类型,然后进行分配:

ToArray<string | number> = ToArray | ToArray

分别带入:

ToArray : Type extends string ? string : number; // string

ToArray: Type extends string ? string : number; // number

然后在将每一项得到的结果联合起来,得到string|number

分配条件类型要满足以下两点

  • 参数是泛型类型
  • 代入参数的是联合类型

never

// never是所有类型的子类型
type A = never extends 'x' ? string : number; // string

type P<T> = T extends 'x' ? string : number;
type B = P<never> // never

上面的示例中,B和A的结果竟然不一样,看起来never并不是一个联合类型,所以直接代入条件类型的定义即可,获取的结果应该和A一直才对啊?

实际上,这里还是条件分配类型在起作用。never被认为是空的联合类型,也就是说,没有联合项的联合类型,所以还是满足上面的分配律,然而因为没有联合项可以分配,所以P<T>的表达式其实根本就没有执行,所以B的定义也就类似于永远没有返回的函数一样,是never类型的。

防止条件判断中的分配

// never是所有类型的子类型
type P<T> = [T] extends ['x'] ? string : number;
type A1 = P<'x' | 'y'> // number
type A2 = P<never> // string

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

在高级类型中的应用

  • Exclude

    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

    高级类型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的属性。