力扣的 TypeScript 面试题

1,412 阅读4分钟

前言

几个礼拜前我在 GitHub 上面看到了力扣的面试题仓库,其中有一道 TypeScript 题目,要求编写复杂类型定义。当时我对类型只是有一个泛泛的了解,所以这题目是看得一头雾水。最近稍微看了一下 TypeScript 的文档,尤其是这两天看了两个“高级”的用法,所以决定重新尝试一下这道题。题目原地址在这里,下面是原题描述。

题目描述

假设有一个叫 EffectModule 的类

class EffectModule {}

这个对象上的方法只可能有两种类型签名:

interface Action<T> {
  payload?: T
  type: string
}

asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>

syncMethod<T, U>(action: Action<T>): Action<U>

这个对象上还可能有一些任意的非函数属性

interface Action<T> {
    payload?: T;
    type: string;
}

class EffectModule {
    count = 1;
    message = 'hello!';

    delay(input: Promise<number>) {
        return input.then(i => ({
            payload: `hello ${i}!`,
            type: 'delay',
        }));
    }

    setMessage(action: Action<Date>) {
        return {
            payload: action.payload!.getMilliseconds(),
            type: 'set-message',
        };
    }
}

现在有一个叫 connect 的函数,它接受 EffectModule 实例,将它变成另一个对象,这个对象上只有EffectModule 的同名方法,但是方法的类型签名被改变了:

asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>  变成了
asyncMethod<T, U>(input: T): Action<U>
syncMethod<T, U>(action: Action<T>): Action<U>  变成了
syncMethod<T, U>(action: T): Action<U>

例子:

EffectModule 定义如下:

interface Action<T> {
    payload?: T;
    type: string;
}

class EffectModule {
    count = 1;
    message = 'hello!';

    delay(input: Promise<number>) {
        return input.then(i => ({
            payload: `hello ${i}!`,
            type: 'delay',
        }));
    }

    setMessage(action: Action<Date>) {
        return {
            payload: action.payload!.getMilliseconds(),
            type: 'set-message',
        };
    }
}

connect 之后:

type Connected = {
    delay(input: number): Action<string>;
    setMessage(action: Date): Action<number>;
};
const effectModule = new EffectModule();
const connected: Connected = connect(effectModule);

要求: 将下面代码中的 any 替换成题目的解答,让编译能够顺利通过。

// 修改 Connect 的类型,让 connected 的类型变成预期的类型
type Connect = (module: EffectModule) => any;

分析题目

我们来梳理一下题目,可以大概理解为有一个 EffectModule 类型,它有两种函数签名,还可以有任意的非函数属性,如下定义

type EffectModule<T, U> = {
    [prop: string]: any;
    <T, U>(input: Promise<T>): Promise<Action<U>>; // asyncMethod
    <T, U>(action: Action<T>): Action<U>; //syncMethod
};

另外有一个 Connected 类型,它只有 EffectModule 上的同名方法,但是方法的类型签名变了,而且它没有非函数属性

type Connected = {
    <T, U>(input: T): Action<U>; // asyncMethod
    <T, U>(action: T): Action<U>; // syncMethod
};

Connect 是一个函数签名,它接收一个 EffectModule 类型的对象,返回一个 Connected 类型的对象。

type Connect = (module: EffectModule) => any;

我们要做的就是把 any 改成符合要求的类型定义。

总结一下,我们有两件事情要做:

  1. Connect 参数对象上的非函数属性去掉
  2. Connect 参数对象上的函数签名改成符合题目要求

开始解题

去除非函数属性

去除非函数属性,也就是挑出函数属性

首先想一下,如果我们要基于原有类型创建新类型,要怎么做?比如

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

上面的代码只是定义了一个和原有类型一模一样的新类型,其中 keyof T 相当于遍历了类型 T 的所有属性。

如果我们把 keyof T 部分替换成只包含函数属性的集合,那不就完了吗?我们来改一下上面的代码

type MakeConnected<T> = {
    [P in PickFuncKey<T>]: T[P];
};

可惜 TypeScript 并没有提供一个 PickFuncKey 方法,所以我们来自己实现一个。

要求: PickFuncKey 接收一个类型参数 T,返回 T 中所有函数属性的 key 的集合。注意我们只需要 key

这里有一个关键知识点就是:如何判断属性是否函数属性?

答案就是 extends 关键字。

PickFuncKey<T> 可以定义如下

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

改变函数签名

第二步是改变方法的类型签名,我们的对象只有两种函数签名。如果是

<T, U>(input: Promise<T>): Promise<Action<U>>

就改成

<T, U>(input: T): Action<U>

如果是

<T, U>(action: Action<T>): Action<U>

就改成

<T, U>(action: T): Action<U>

当然首先我们得判断函数属性具体是哪种签名,这又用到了 extends

p.s. 这里我把 MakeConnected 的形参改成了 M,便于区分。

type MakeConnected<M> = {
    [P in PickFuncKey<M>]: M[P] extends (
        input: Promise<T>,
    ) => Promise<Action<U>>
        ? TODO
        : M[P] extends (action: Action<T>) => Action<U>
        ? TODO
        : never;
};

首先用

M[P] extends (input: Promise<T>) => Promise<Action<U>>

来判断是不是 asyncMethod 的签名,是就返回处理后的函数签名(TODO),不是的话就继续用

M[P] extends (action: Action<T>) => Action<U>

来判断符不符合 syncMethod 的函数签名,是就返回处理后的函数签名(TODO),不是就返回 never

接着就是如何修改函数签名了,首先第一个

(input: Promise<T>) => Promise<Action<U>>

要改成

(input: T) => Action<U>

需求简单明确,但问题是,TU 都从哪里来?我们的 MakeConnected 只接收一个参数 M,而且,在每个函数属性的签名中, TU 都是不一样的。

这时候 infer 关键字就派上用场了。

如果你不知道 infer 是干什么的,我这里有一篇小笔记,或者去查下文档吧。

有了 infer 之后我们就可以这样修改函数签名了

M[P] extends (input: Promise<infer T>) => Promise<Action<infer U>> ? (input: T) => Action<U> : never

第二种函数签名同理

M[P] extends (action: Action<infer T>) => Action<infer U> ? (action: T): Action<U> : never

完整代码

type PickFuncKey<F> = {
    [P in keyof F]: F[P] extends Function ? P : never;
}[keyof F];

type MakeConnected<M> = {
    [P in PickFuncKey<M>]: M[P] extends (
        action: Action<infer T>,
    ) => Action<infer U>
        ? (action: T) => Action<U>
        : M[P] extends (input: Promise<infer T>) => Promise<Action<infer U>>
        ? (input: T) => Action<U>
        : never;
};

// 使用 `MakeConnected` 时传入 module 的类型
type Connect = (module: EffectModule) => MakeConnected<typeof module>;

后记

其实这样子分析完之后发现,这道题目也没有特别复杂嘛,主要还是自己学得太少。

完整的代码在这里