在 TypeScript 中，我如何输入函数的参数而不是返回值？

Question

我在 TypeScript 中使用 redux、redux-thunk 和 reselect 编写应用程序。

在很多地方，我都在写这样的函数：

const selectThing = (store: IStore) => store.path.to.thing;

const fetchThing = (thingId: string) => (dispatch: Dispatch<IStore>, getState: () => IStore) => {
  // fetch a thing by id and handle the result

  return result;
}

特别是在第二个例子中，第二个函数的输入注释占用了很多空间，我想写一个函数接口来处理输入参数。

type StoreSelector<T = any> = (store: IStore) => T;
type ThunkDispatch<T = any> = (dispatch: Dispatch<IStore>, getState: () => IStore) => T;

上面的分型解决了每次都要手动输入参数的问题，但是需要我手动输入函数的返回值，之前是自动工作的。

有没有办法输入函数的参数，但让 typescript 自动检测函数体的返回值？

Answer 1

您可以使用函数来推断返回类型和推断参数类型。

function createThunkDispatch<T>(fn: (dispatch: Dispatch<IStore>, getState: () => IStore) => T) {
    return fn;
} 

// const fetchThing: (thingId: string) => (dispatch: Dispatch<IStore>, getState: () => IStore) => string
const fetchThing = (thingId: string) => createThunkDispatch((dispatch, getState) => {
    // fetch a thing by id and handle the result

    return "result";
});