你需要知道的TypeScript中的工具方法

前言

在使用TS的过程中，如果只是用一些基础的数据类型，那显然是不够的。那些只能提供一些基础的定义，如果去阅读别人的源码的时候会发现会有很多语法糖和工具方法函数，如果这些看不懂的话，是很难去理解别人代码中的逻辑的，这里就对TS中的工具方法作一个整理归纳。

Partial

Partial一般将某个类型里的属性全部变为可选项

用法

Partial<T>

定义

type Partial<T> = {
    [P in keyof T]?: T[P];
};
​

通过keyof T 拿到T中的所有属性名，然后用in的方式进行遍历，通过P取到属性名，再通过T[P]取到属性值，重新赋值定义一下中间加上?把属性变成可选的

例子

interface Water {
    name: string;
    age: number;
}
​
const a:Partial<Water> = {name: water }

Required

Required就是把所有的属性变成必选项，和Partial的能力相反

用法

Required<T>

定义

type Required<T> = {
    [P in keyof T]-?: T[P];
};

处理的方式大致与上一个Partial相似，唯一的区别是-?来移除可选项?。其实与-?对应的是+?，但是+可以省略

Readonly

Readonly的作用是将某个类型所有属性变为只读属性，属性不能够被重新赋值

用法

Readonly<T>

定义

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
​

遍历属性，然后给属性加上readonly关键字，这里和上面?可选类似，如果改成-readonly就是移除属性的只读readonly标识

例子

interface Water {
  name: string;
}
​
const water:Readonly<Water> = {
  name: 'water'
}
​
water.name = 'water2' // Error

Record

Record的作用是将K中所有的属性的值转化为T类型

用法

Record<K,T>

定义

type Record<K extends keyof any, T> = {
    [P in K]: T;
};
​

Record一般用于描述一个对key和value类型都有明确约束的对象，举例而言要求一个对象的key只能是"goods" | "info" | "desc"中的其中一种，value只能为T类型

例子

interface T {
  title: string;
}
​
type K = "goods" | "info" | "desc";
​
const x: Record<K, T> = {
  goods: { title: "goods" },
  info: { title: "info" },
  desc: { title: "desc" }
};
​

Pick

Pick作用是将某个类型中的某些属性筛选出来，变成包含这些属性的类型

用法

Pick<T,"key">

定义

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
​

例子

interface Water {
  name: string;
  age: number;
  sex: string;
}
​
type PWater = Pick<Water,"name">
​
const water:PWater = {
  name: 'water'
}

Omit

Omit的作用是从一个类型中剔除一些属性，然后形成一个新的类型

用法

Omit<T,"key">

定义

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

例子

interface Water {
  name: string;
  age: number;
  sex: string;
}
​
type OWater = Omit<Water,"age">
​
const water:OWater = {
  name: 'water',
  sex: '男'
}

Exclude

用法

Exclude<T,U>

Exclude作用是剔除掉T包含在U中的元素。表示从T中剔除U

定义

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

例子

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number

Extract

用法

Extract<T,U>

Extract作用是提取出T包含在U中的元素，表示从T中取出U

定义

type Extract<T, U> = T extends U ? T : never;

例子

type T01 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'>;  // -> 'a' | 'c'

NonNullable

用法

NonNullable<string | number | undefined>;

NonNullable的作用就是来过滤类型中的null以及undefined类型

定义

type NonNullable<T> = T extendsnull | undefined ? never : T;

例子

type T0 = NonNullable<string | number | undefined>; // string | number
type T1 = NonNullable<string[] | null | undefined>; // string[]

ReturnType

ReturnType作用就是获取函数的返回类型

定义

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

例子

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

Parameters

Parameters 的作用是用于获得函数的参数类型组成的元组类型

定义

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any
  ? P : never;

例子

type A = Parameters<() =>void>; // []
type B = Parameters<typeofArray.isArray>; // [any]
type C = Parameters<typeofparseInt>; // [string, (number | undefined)?]
type D = Parameters<typeofMath.max>; // number[]

InstanceType

InstanceType 的作用是获取构造函数类型的实例类型

定义

type InstanceType<T extendsnew (...args: any) => any> = T extendsnew (...args: any) => infer R ? R : any;

例子

class C {
  x = 0;
  y = 0;
}
​
type T0 = InstanceType<typeof C>; // C
type T1 = InstanceType<any>; // any
type T2 = InstanceType<never>; // any
type T3 = InstanceType<string>; // Error
type T4 = InstanceType<Function>; // Error
​

ThisType

ThisType<T> 的作用是用于指定上下文对象的类型

定义

interface ThisType<T> { }

例子

interface Person {
    name: string;
    age: number;
}
​
const obj: ThisType<Person> = {
  dosth() {
    this.name // string
  }
}
​

ConstructorParameters

ConstructorParameters<T> 的作用是提取构造函数类型的所有参数类型。它会生成具有所有参数类型的元组类型（如果T 不是函数，则返回的是 never 类型）。

定义

type ConstructorParameters<T extendsnew (...args: any) => any> = T extendsnew (...args: infer P) => any ? P : never;
​

例子

type A = ConstructorParameters<ErrorConstructor>; // [(string | undefined)?]
type B = ConstructorParameters<FunctionConstructor>; // string[]
type C = ConstructorParameters<RegExpConstructor>; // [string, (string |

技巧

通过枚举类型，获取值的联合类型

Enum Ecard {
    A = 'a',
    B = 'b'
}

Type CardType = `${Ecard}` // 'a' | 'b'

通过对象类型，获取值的联合类型

Type Ecard = {
    A:'a',
    B:'b'
}

Type Card = Ecard[keyof Ecard] // 'a' | 'b'

小结

通过对TypeScript中的工具方法的梳理，能够看懂更加复杂的类型定义。很多开源的项目中，都是拥有很复杂的类型定义，如果对这些方法不熟悉的话，那对看源码来说也是有些吃力的，希望能帮到你！！！