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中的XY不一定就是一个固定值,也可以是一个新的表达式,这样就一值递归下去:

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 : YT的类型为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, 索引类型查询操作符。 对于任何类型 Tkeyof 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

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

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页