前言
最近开始逐步转向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内置的比较常见的工具泛型,还有很多没有写,等以后遇到使用的场景,再慢慢补充。