原来TypeScript已经有这么多工具函数了?附手动实现!🚀🚀🚀

1,588 阅读3分钟

起因

之前提到过,我面试字节,面试官问了很多关于ts的问题,例如:

  • ts里有哪些工具函数?
  • 怎么实现ts里的Partial工具函数?
  • ts里的装饰器了解吗?

当时面试听到第二个问题我直接懵逼了。本来用到的就少,更别说自己实现了。

现在有充足的时间了,好好整理了下这些工具函数,并且逐个实现了一遍,希望可以帮到你。

文章同步在公众号:萌萌哒草头将军

原来已经有这么多工具函数了

我根据发布的版本整理了下,可以说是非常非常强大了,包含了我们开发中几乎可能遇到的所有情况。

引入版本2.1

工具类型描述
Partial<T>将属性设为可选
Readonly<T>将属性设为只读
Record<K, T>构造键值对类型
Pick<T, K>从类型中挑选属性
Exclude<T, U>剔除某些类型

引入版本2.8

工具类型描述
Extract<T, U>提取符合条件的类型
NonNullable<T>剔除 nullundefined
ReturnType<T>获取函数返回值类型
InstanceType<T>获取构造函数的实例类型

引入版本3.5

工具类型描述
Omit<T, K>从类型中删除属性

引入版本4.0

工具类型描述
Awaited<T>获取 Promise 的解析类型

引入版本4.4

工具类型描述
Required<T>将属性设为必填

引入版本4.6

工具类型描述
Parameters<T>获取函数的参数类型
ConstructorParameters<T>获取构造函数的参数类型

手动实现

下面几个是基础的实现。

1. Partial<T>

将类型 T 的所有属性变为可选。

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

2. Required<T>

将类型 T 的所有属性变为必选。

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

这里的-?是移除属性修饰符中的?,将可选属性变为必选属性

3. Readonly<T>

将类型 T 的所有属性设为只读。

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

4. Record<K, T>

创建一个类型,其属性名为 K,属性值为 T。

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

5. Pick<T, K>

从类型 T 中选择部分属性 K。

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

6. Exclude<T, U>

从类型 T 中排除可以赋值给类型 U 的类型。

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

7. Omit<T, K>

从类型 T 中剔除部分属性 K。

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

8. Extract<T, U>

从类型 T 中提取可以赋值给类型 U 的类型。

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

9. NonNullable<T>

从类型 T 中排除 null 和 undefined。

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

10. ReturnType<T>

获取函数类型 T 的返回类型。

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

inferts的关键字,一般很少用到,主要用于条件类型中,用来推断一个类型的某些部分。相信上面的例子可以让你更好的理解它的用处。

11. ConstructorParameters<T>

获取构造函数类型 T 的参数类型组成的元组类型。

下面的几个类型实现就比较困难了,我也是查询好多资料才搞明白(?半懂)的

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

12. Parameters<T>

获取函数类型 T 的参数类型组成的元组类型。

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

13. InstanceType<T>

获取构造函数类型 T 的实例类型。

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

14. ThisType<T>

标记对象字面量的 this 类型。

type ThisTypeLike<T> = {
  [K in keyof T]: T[K] extends (...args: any[]) => any
    ? (this: T, ...args: Parameters<T[K]>) => ReturnType<T[K]>
    : T[K];
};

总结

好了,今天的分享就这些了,希望可以帮助大家更好的理解ts的这些工具函数。整理不易,如果对你有用请给我点赞,十分感谢!

如果文章中有错误的地方请及时指正!