TypeScript中的泛型工具

灰太狼 2022-08-31 06:58 244阅读 0赞

原文链接：[https://juejin.cn/post/6844904147167215624\#heading-1][https_juejin.cn_post_6844904147167215624_heading-1]

本期涉及的操作符如下：

* Partial
 * Required
 * Readonly
 * Pick<T,K extends keyof T>
 * Record<K extends keyof any, T>
 * Exclude<T,U>
 * Extract<T,U>
 * Omit<T, K extends keyof any>

首先还是先讲述一下ts中的这些高级操作符，如果都已经掌握了，可以直接跳到末尾的手撕笔试题。手撕笔试题

## Partial ##

Partial 将属性变为可选属性。举个栗子，iUser 这个接口 name 和 age 是必须的，但是同时又有另一个接口 iOptionUser,接口属性完全一样，只是里面的 name 和 age 是可选的。比较笨的方法当然是手动再写一个。

interface iUser {
      name: string;
      age: number;
    }
    interface iOptionUser {
      name?: string;
      age?: number;
    }

其实，我们可以看到的是，iOptionUser 只是在属性后添加一个?接口。我们可以简单实现如下（该方法已内置）

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

![1f74e5d9a0e5ee241b078230b5541311.png][]

## Required ##

Required和Partial方法正好相反，是将属性变成必须。方法同样非常简单，可以这样实现（该方法已内置）

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

效果如下：

![c703bd8988989429dd07742fbecaaa75.png][]

### Readonly ###

Readonly是将属性变成只读。方法同样非常简单，可以这样实现（该方法已内置）

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

效果如下：

![c5bd5da9df7b8c75ca9fc6a7df2ba0ce.png][]

### Pick<T,K extends keyof T> ###

Pick顾名思义，就是把一些属性挑选出来。效果如下：

![a1a8cbad25a2f460b3e26ef773ddf263.png][]

大家可以思考一下怎么实现，官方源码如下：

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

### Record<K extends keyof any, T> ###

Record用于创建一个具有同类型属性值的对象。

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

### Exclude<T,U> ###

从类型 T 中剔除所有可以赋值给 U 的属性，然后构造一个类型。主要用于联合类型。

![d7f978ac60ad12cc78d9f76c0e3a3413.png][]

官方源码如下：

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

### Extract<T,U> ###

功能与 Exclude相反

![c73039639c8fe29c1f69b5f2685e7635.png][]

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

### Omit<T, K extends keyof any> ###

主要用于剔除interface中的部分属性。 比如接口iUser包含name、age、firstName、lastName、location属性，而接口iUser2不包含location属性，我们可以使用前面提到的Pick实现，但这样会比较复杂，所以有了Omit 操作符。

interface iUser {
        name: string;
        age: number;
        firstName: string;
        lastName: string;
        location: string;
    }
    interface iUser2 {
        name: string;
        age: number;
        firstName: string;
        lastName: string;
    }

效果如下：

![75317ba9fda7a0ed82b1c0ea8040b84d.png][]

Omit源码如下：

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

## 手撕笔试题 ##

这是一道 leetcode 的 [ts笔试题][ts]，原题目略长，就不直接贴出来了，这里简化一下：

// 假设有一个这样的类型：
 interface initInterface {
 count: number;
 message: string;
 asyncMethod<T, U>(input: Promise<T>): Promise<Action>;
 syncMethod<T, U>(action: Action<T>): Action;
 }
 // 在经过 Connect 函数之后，返回值类型为
 
 type Result {
 asyncMethod<T, U>(input: T): Action;
 syncMethod<T, U>(action: T): Action;
 }
 // 其中 Action<T> 的定义为：
 interface Action<T> {
 payload?: T
 type: string
 }
 // 现在要求写出Connect的函数类型定义。

首先我们需要明白这个题义，这里是需要我们把initInterface里的非函数属性去除，并且函数签名发生了变化。

1.  第一步：获取函数属性

type RemoveNonFunctionProps<T> = {
 [K in keyof T]: T[K] extends Function ? K : never;
 }[keyof T];
 
 type FunctionProps = RemoveNonFunctionProps<initInterface>;

![578ce362f0e390a86bcea8a08766c6a6.png][]

2. 将只包含函数属性的类型Pick出来

type PickFunction<T> = Pick<T, RemoveNonFunctionProps<T>>;
 type iFunctionInterface = PickFunction<initInterface>;

![12dfa5ed7b007d010fc87471ee934d77.png][]

3.接下来就是函数转换的过程，这里需要用到我[上篇博文][Link 1]提到的infer。

我们对比一下，转换前后的函数签名,发现只是去除了参数和返回结果的Promsie。

type asyncMethod<T, U> = (input: Promise<T>) => Promise<Action>;
 type transformAsyncMethod<T,U> = (input: T) => Action;

我们使用infer可以这样做

type TransformASyncMethod<T> = T extends (
 input: Promise<infer U>
 ) => Promise<Action<infer S>>
 ? (input: U) => Action<S>
 : never;

![15217c42ca99e329690c5369ab030576.png][]

同理我们看一下方法二，转换前后：

type syncMethod<T, U> = (action: Action<T>) => Action;
 type transformSyncMethod<T, U> = (action: T) => Action;

我们依旧使用infer

type TransformSyncMethod<T> = T extends (
 action: Action<infer U>
 ) => Action<infer S>
 ? (action: U) => Action<S>
 : never;

![296b0d435ba0fa6e58c928e1b4eb9100.png][]

所以转换函数可以这样写：

type TransformMethod<T> = T extends (
 input: Promise<infer U>
 ) => Promise<Action<infer S>>
 ? (input: U) => Action<S>
 : T extends (action: Action<infer U>) => Action<infer S>
 ? (action: U) => Action<S>
 : never;

4.整合 前三步，我们已经有了完整的思路，现在就是把Connect类型定义整合起来。

type RemoveNonFunctionProps<T> = {
 [K in keyof T]: T[K] extends Function ? K : never;
 }[keyof T];
 type PickFunction<T> = Pick<T, RemoveNonFunctionProps<T>>;
 type TransformMethod<T> = T extends (
 input: Promise<infer U>
 ) => Promise<Action<infer S>>
 ? (input: U) => Action<S>
 : T extends (action: Action<infer U>) => Action<infer S>
 ? (action: U) => Action<S>
 : never;
 type ConnectAll<T> = {
 [K in keyof T]: TransformMethod<T[K]>;
 };
 type Connect<T> = ConnectAll<PickFunction<T>>;

[https_juejin.cn_post_6844904147167215624_heading-1]: https://juejin.cn/post/6844904147167215624#heading-1
[1f74e5d9a0e5ee241b078230b5541311.png]: /images/20220829/eb14273bcf48489592ec03ada8391148.png
[c703bd8988989429dd07742fbecaaa75.png]: /images/20220829/8c5c5d5ca16c4912b419daf0f2b19dba.png
[c5bd5da9df7b8c75ca9fc6a7df2ba0ce.png]: /images/20220829/c062205a04aa4489806838acec850a43.png
[a1a8cbad25a2f460b3e26ef773ddf263.png]: /images/20220829/66f7428cc79c4aa98521ffbe2029027f.png
[d7f978ac60ad12cc78d9f76c0e3a3413.png]: /images/20220829/6cf592cb9ffd446d9f1a5c231c762c45.png
[c73039639c8fe29c1f69b5f2685e7635.png]: /images/20220829/c687680589e74c3baad7157e5888ac39.png
[75317ba9fda7a0ed82b1c0ea8040b84d.png]: /images/20220829/cc46654b5fdf44b7abf38f927ef36bfe.png
[ts]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FLeetCode-OpenSource%2Fhire%2Fblob%2Fmaster%2Ftypescript_zh.md
[578ce362f0e390a86bcea8a08766c6a6.png]: /images/20220829/db2cabba514541499c75b5fe787f5a2a.png
[12dfa5ed7b007d010fc87471ee934d77.png]: /images/20220829/8121f844e9a74dcbbc9d145394b572c7.png
[Link 1]: https://juejin.im/post/6844904145732763655
[15217c42ca99e329690c5369ab030576.png]: /images/20220829/8161b6cd639e4a9eb03ecda125b9c003.png
[296b0d435ba0fa6e58c928e1b4eb9100.png]: /images/20220829/c92515052a7b4324bdf0d4d59ecdce61.png