TS部分工具泛型和操作符

1,688 阅读3分钟

前言

最近开始逐步转向TypeScipt,在学习和开发的过程中,发现使用一些工具泛型可以大大提高开发效率。下面介绍一些常用的工具泛型和具体实现的源码。

操作符

工具泛型的实现主要是对类型的操作,这就需要先理解一些TS中的操作符的作用。

keyof

keyof 操作符 用于获取某种类型的所有key,返回一个联合类型。下面看一个例子:

interface Student {
  name: string,
  age: number,
  sex: 'male' | 'female'
}

type Keys = keyof Student // 'name' | 'age' | 'sex'

extends

extends 在TS中除了和JS相同的对Class的继承的用法之外,还有约束泛型和条件类型。

type Get<T, P extends keyof T> = T[P]

interface Student {
  name: string;
  age: number;
  sex: 'male' | 'female;
}

type newStudent = Get<Student, 'sex'> // 'male' | 'female'

这个例子实现了一个Get泛型,将输入的类型的某个key对应的类型返回,在这个例子中形参P必须是'name' | 'age' | sex 中的一种,这就是extends约束泛型的作用。

infer

infer这个关键字是前段时间做Type Challenges的时候看题解的时候了解到的,我直接把题目复制过来:

Implement a generic Last<T> that takes an Array T and returns it's last element's type.

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type tail1 = Last<arr1> // expected to be 'c'
type tail2 = Last<arr2> // expected to be 1
type Last<T extends any[]> = T extends [infer First, ...infer Other] ? T[Other['length']] : never; 

infer的定义是 用来推断待推断的类型。可以参考上面的Last<T>的定义来理解.这个例子还展示了extends条件类型的使用。

typeof

typeof 对某个值使用,然后返回这个值的类型,还是看示例

interface Student {
  name: string;
  age: number;
  sex: 'male' | 'female';
}

const student: Student = {
  name: 'harlan',
  age: 22,
  sex: 'male',
}

type newType = typeof student // Student

工具泛型

Record

源码

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

接受两个参数,返回一个新的类型,参数K是一个联合类型,参数T是一个任意类型。还是看示例,这两种写法等价。

type newType = Record<'a' | 'b' | 'c', string>

type newType = {
  a: string,
  b: string,
  c: string,
}

Partial

这个很简单,把一个类型的所有属性变成可选的

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

Required

这个和Partial相反,把一个类型的所有属性变成required

/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};

Readonly

把一个类型的所有属性变成只读的

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

Exclude

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

直接从代码理解,T是U的子类型,那么就返回nerver,否则就返回T

Extract

/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never;

这个和上面的Exclude恰好相反,T是U的子类型,就返回T,f否则就返回never

Pick

Pick可以将一个类型的部分属性提取出来返回一个新类型

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

下面看个例子

interface Student {
  name: string;
  age: number;
  sex: 'male' | 'female';
}

type newStudent = Pick<Student, 'name' | 'age'>

/*
type newStudent = {
  name: string;
  age: number
}
*/

Omit

Omit也算是比较常用的工具泛型,Pick恰好相反,是从T类型中去掉部分属性,生成一个新的类型。

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

来个例子

interface Student {
  name: string;
  age: number;
  sex: 'male' | 'female';
}

type newStudent = Omit<Student, 'name' | 'age'>

/*
type newStudent = {
 sex: 'male' | 'female;
}
*/

总结

以上是TS内置的比较常见的工具泛型,还有很多没有写,等以后遇到使用的场景,再慢慢补充。