TypeScript extends,infer,keyof , 内置类型ReturnType,Partial,Readonly等

概述

在 2.8 版本 lib.d.ts中 ，TypeScript 内置了一些映射类型：

• Exclude<T, U> – 从T中剔除可以赋值给U的类型。
• Extract<T, U> – 提取T中可以赋值给U的类型。
• NonNullable – 从T中剔除null和undefined。
• ReturnType – 获取函数返回值类型。
• InstanceType – 获取构造函数类型的实例类型。

详细信息可以参考官网 《Utility Types》
这些类型的实现依赖keyof和infer语法，下面我们先来学习这2中语法

extends

用户继承关系

extends关键很早就有了，但是作用很单一，用来表示继承接口或一个类，例如：

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

用户条件表达式

typescript 2.8引入了条件类型表达式，长这个样子:

T extends U ? X : Y

看起来是不是有点像三元运算符: condition ? result(1) : result(2)，用大白话可以表示为:

如果T包含的类型 是 U包含的类型的 ‘子集’，那么取结果X，否则取结果Y。

再举几个ts预定义条件类型的例子，加深理解:

type NonNullable<T> = T extends null | undefined ? never : T;  // 如果泛型参数 T 为 null 或 undefined，那么取 never，否则直接返回T。
let demo1: NonNullable<number>; // => number，因为number不是null | undefined的子集
let demo3: NonNullable<undefined>; // => never，因为never是null | undefined的子集

T extends U ? X : Y中的X或Y不一定就是一个固定值，也可以是一个新的表达式，这样就一值递归下去：

type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function ? "function" :
    "object";

type T0 = TypeName<string>;  // "string"
type T1 = TypeName<"a">;  // "string"
type T2 = TypeName<true>;  // "boolean"
type T3 = TypeName<() => void>;  // "function"
type T4 = TypeName<string[]>;  // "object"

分布式有条件类型

如果有条件类型里待检查的类型是naked type parameter，那么它也被称为“分布式有条件类型”。 分布式有条件类型在实例化时会自动分发成联合类型。 例如，实例化T extends U ? X : Y，T的类型为A | B | C，会被解析为(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)。

例子：

type T10 = TypeName<string | (() => void)>;  // "string" | "function"
type T12 = TypeName<string | string[] | undefined>;  // "string" | "object" | "undefined"
type T11 = TypeName<string[] | number[]>;  // "object"

有条件类型的分布式的属性可以方便地用来过滤联合类型：

type Diff<T, U> = T extends U ? never : T;  // 移除T中与U中重合的元素
//注意，不是差集，差集是指除去重合后T与U的剩下元素集合 ,而这里去重后，仅保留T的剩余元素
type Filter<T, U> = T extends U ? T : never;  // 移除T中不与U中重合的元素 ，仅保留重合元素，即交集

type T30 = Diff<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "b" | "d"
type T31 = Filter<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "a" | "c"
type T32 = Diff<string | number | (() => void), Function>;  // string | number
type T33 = Filter<string | number | (() => void), Function>;  // () => void

与联合类型和交叉类型相似，有条件类型不允许递归地引用自己。比如下面的错误。

type ElementType<T> = T extends any[] ? ElementType<T[number]> : T;  // Error

ElementType引用了自身，编译错误

keyof

一个常见的JavaScript模式是从对象中选取属性的子集过滤值。

function pluck(o, names) {
    return names.map(n => o[n]);     //按属性names子集，过滤子集的值
}

下面是如何在TypeScript里使用此函数，通过 索引类型查询和 索引访问操作符，和上面的例子一样，只是通过泛型加了约束，校验属性的有效性：

function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {   //对入参增加约束
  return names.map(n => o[n]);    //过滤的代码不变
}

interface Person {
    name: string;
    age: number;
}
let person: Person = {
    name: 'Jarid',
    age: 35
};
let strings: string[] = pluck(person, ['name']); // ok, ["Jarid"]

编译器会检查 name是否真的是 Person的一个属性。 本例还引入了几个新的类型操作符。 首先是keyof T， 索引类型查询操作符。 对于任何类型 T， keyof T的结果为 T上已知的公共属性名的联合。 例如：

let personProps: keyof Person; // 'name' | 'age'

keyof Person是完全可以与 'name' | 'age'互相替换的。 不同的是如果你添加了其它的属性到 Person，例如 address: string，那么 keyof Person会自动变为 'name' | 'age' | 'address'。 你可以在像pluck函数这类上下文里使用 keyof，因为在使用之前你并不清楚可能出现的属性名。 但编译器会检查你是否传入了正确的属性名给 pluck：

pluck(person, ['age', 'unknown']); // error, 'unknown' is not in 'name' | 'age'

infer

infer关键词常在条件类型中和 extends关键词一同出现，表示将要推断的类型，作为类型变量可以在三元表达式的 True 部分引用。而 下文中 ReturnType正是使用这种方式提取到了函数的返回类型。

用在函数中

可以表示函数中的入参或函数的返回值。

用于函数入参

示例如下：

type ParamType<T> = T extends (param: infer P) => any ? P : T;

在这个条件语句 T extends (param: infer P) => any ? P : T中，infer P 表示待推断的函数参数。

整句表示为：如果 T 能赋值给函数(param: infer P) => any，则结果类型是 函数(param: infer P) => any类型中的参数 P，否则返回为 T。

interface User {
  name: string;
  age: number;
}

type Func = (user: User) => void

type Param = ParamType<Func>;   // Param = User
type AA = ParamType<string>;    // string

用于函数反回值

我们就用内置函数 ReturnType 为例

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

infer出现在函数的返回值中，细节可以参考下文的ReturnType章节

构造函数中

简单来说，构造函数也是函数的特例，本质上用法相同，唯一区别在于构造函数本身的new语法。

用于提取构造函数中参数（实例）类型：
一个构造函数可以使用 new 来实例化，因此它的类型通常表示如下：

type Constructor = new (...args: any[]) => any;

当infer 用于构造函数类型中，可用于参数位置 new (...args: infer P) => any; 和返回值位置 new (...args: any[]) => infer P;。

因此就内置如下两个映射类型：

// 获取参数类型
type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never;

// 获取实例类型
type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;

class TestClass {

  constructor(
    public name: string,
    public string: number
  ) {}
}

type Params = ConstructorParameters<typeof TestClass>;  // [string, numbder]

type Instance = InstanceType<typeof TestClass>;         // TestClass

注意：infer关键字这个类型变量只能在true的分支中使用，也就是说infer R ? R : any不可以写成infer R ? any : R

内置类型

ReturnType

ReturnType<T>的作用是用于获取函数 T 的返回类型。

定义：

// node_modules/typescript/lib/lib.es5.d.ts

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

在这个条件语句 T extends (...args: any) => infer R? R : any中，infer P 表示待推断的函数返回值。

示例：

type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<any>; // any
type T5 = ReturnType<never>; // any
type T6 = ReturnType<string>; // Error
type T7 = ReturnType<Function>; // Error

注意：特用与获取户函数返回值类型