打字稿指向函数

Question

我正在使用 TypeScript 和 redux 编写一个 reactjs 应用程序。为了描述组件道具，我使用接口而不是 propTypes。这让我可以在编译时检查道具类型。

一些道具是函数（redux action creators，由 connect 和 dispatch 包装）。

如何说我的组件属性是那个 action creator 函数签名的 TypeScript？我的意思是我不想重复描述类型。

要了解更多问题，请看下面的示例：

// here is my action creator
function someAction(prop1: number, prop2: string) {
  ...
}

interface IComponentProps {
  // here I want to say
  // that this is the same function as above,
  // but I have to duplicate its type signature
  someAction(prop1: number, prop2: string);
}

当然，我可以为该功能创建一个接口：

interface ISomeActionFunction {
  (prop1: number, prop2: string): void
}

然后在函数声明和属性接口中都使用它，但不知道有没有办法直接指向具体的函数？

Answer 1

正如您已经意识到的那样，使用界面是您最好的方法。你可以让它看起来像这样：

interface IComponentProps {
    someAction: ISomeActionFunction;
}

interface ISomeActionFunction {
    (prop1: number, prop2: string): void;
}

const someAction: ISomeActionFunction = (p1, p2) => {
    // the compiler will correctly infer the types of p1 and p2 for you
    ...
}

这样，函数类型不会重复，编译器仍然可以检查所有内容。

如果您预见到需要大量动作创建者，您可以像这样添加一个通用助手：

interface IBinaryActionCreator<T1, T2, TResult> {
  (prop1: T1, prop2: T2): TResult;
}

type ISomeActionFunction = IBinaryActionCreator<number, string, void>;

但这可能有点矫枉过正。

打字稿指向函数

Typescript point to function

typescript

reactjs

redux