【问题标题】:Extracting typescript signatures from an object into an interface从对象中提取打字稿签名到接口中
【发布时间】:2019-04-23 20:51:19
【问题描述】:

我有一个习惯,在 redux 中传递信息时,我似乎重复了很多类型。当它们都在 ActionCreators 中定义时,有什么方法可以自动生成接口 Props?请看下面的代码:

import { bindActionCreators, Dispatch } from "redux";
const ActionCreators = {
  foo: (a: string): string => ("foo" + a),
  bar: (a: number): string => ("bar" + a),
  baz: (a: boolean): number => (a ? 256 : 123)
};

interface Props {
  foo: (a: string) => string;
  bar: (a: number) => string;
  baz: (a: boolean) => number;
}

const mapDispatchToProps = (dispatch: Dispatch): Props => {
  return bindActionCreators(ActionCreators, dispatch);
};

不需要了解 bindActionCreators,这里真正的问题是获取 ActionCreators 上的所有签名,然后将其提取到诸如 Props 之类的接口中。

【问题讨论】:

    标签: typescript interface react-redux typescript-typings


    【解决方案1】:

    您可以只使用typeof 类型运算符来获取任何常量的类型。然后,您可以使用类型别名为其命名

    const ActionCreators = {
      foo: (a: string): string => ("foo" + a),
      bar: (a: number): string => ("bar" + a),
      baz: (a: boolean): number => (a ? 256 : 123)
    };
    
    type Props = typeof ActionCreators;
    /*
    Same as
    type Props = {
      foo: (a: string) => string;
      bar: (a: number) => string;
      baz: (a: boolean) => number;
    } 
    */
    

    虽然在这种情况下接口和类型别名之间存在细微差别,但它们应该是等价的。

    编辑

    cmets 中的后续问题:如何将所有成员函数的返回类型更改为 void?

    为此,您需要使用映射类型将原始类型映射到新类型,并使用条件类型来提取原始函数的参数类型:

    type ArgumentTypes<T> = T extends (...a: infer A) => any ? A: [] //Conditional type extracts the argument types
    type Props = {
      // Mapped type, maps the keys of the original type to a new type
      // with the same keys, and with each key being a function with the same argument as the original 
      // but returning void.
      [P in keyof typeof ActionCreators]: (...a: ArgumentTypes<typeof ActionCreators[P]>) => void
    }
    

    【讨论】:

    • 这很容易。谢谢。我其实也想把 Props 中的返回值改成 void。这也是微不足道的吗?
    • @MrMamen 不是微不足道的,努博也很难,我会​​尽快将其添加到答案中
    • @MrMamen 我把答案加到了后续,别忘了点赞;)
    猜你喜欢
    • 2020-10-05
    • 2017-10-27
    • 2021-11-02
    • 1970-01-01
    • 2014-08-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多