异步调度值的 TypeScript 类型

Question

我有以下异步操作定义：

import {Dispatch} from 'react';
import axios, {AxiosResponse, AxiosError} from 'axios';

function asyncAction() {
    return (dispatch: Dispatch<any>): Promise<number> => {
        return axios.get('http://www.example.com')
            .then( (res: AxiosResponse<any>) => {
                return 1;
            })
            .catch( (err: AxiosError<any>) => {
                return 2;
            });
    }
}

上面的类型检查没问题。

我也明白，当您调用 dispatch 并将异步操作传递给它时，如下所示：

dispatch(asynAction())

…然后是内部函数的返回类型，所以我希望上述值的类型是Promise<number>。然而，以下内容不会进行类型检查：

function foo (dispatch: Dispatch<any>) {
    const n: Promise<number> = dispatch(asyncAction()); // line A
}

具体来说，我在line A 收到以下错误：

TS2322: Type 'void' is not assignable to type 'Promise<number>'

所以，为了满足TS，我不得不做如下感觉不对劲的事情：

const n: Promise<number> = dispatch(asyncAction()) as unknown as Promise<number>;

我错过了什么？

更新

我的 `package.json` 有：

"@types/react-redux": "^7.1.9",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"

当我执行以下操作时：

import {ThunkDispatch as Dispatch} from 'redux-thunk';

...并使用导入的ThunkDispatch 类型作为ThunkDispatch<any, any, any>（在上面的代码中我有Dispatch<any>），如下所示：

import axios, {AxiosResponse
             , AxiosError} from 'axios';
import {ThunkDispatch as Dispatch} from 'redux-thunk';

export function asyncAction() {
    return (dispatch: Dispatch<any, any, any>): Promise<number> => {
        return axios.get('http://www.example.com')
            .then( (res: AxiosResponse<any>) => {
                return 1;
            })
            .catch( (err: AxiosError<any>) => {
                return 2;
            });
    }
}

export function foo (dispatch: Dispatch<any, any, any>) {
    const n: Promise<number> = dispatch(asyncAction());
    console.log(n);
}

…我得到一个不同的错误：

  TS2739: Type '(dispatch: ThunkDispatch<any, any, any>) => Promise<number>' is missing the following properties from type 'Promise<number>': then, catch, [Symbol.toStringTag]

Answer 1

不同的包对Dispatch 类型有不同的定义。您正在从“react”导入一个，这不适合您的需求。

Redux 声明一个 dispatch 返回 action：

export interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): T
}

React 定义了 Dispatch 用于它自己的 useReducer 钩子（redux-lite），它说它什么都不返回：

type Dispatch<A> = (value: A) => void;

Thunk 有一个更复杂的定义，允许它基于泛型返回任意返回类型：

export interface Dispatch<A extends Action = AnyAction> {
    <TReturnType = any, TState = any, TExtraThunkArg = any>(
      thunkAction: ThunkAction<TReturnType, TState, TExtraThunkArg, A>,
    ): TReturnType;
  }

您的第一个示例有效，因为您从未真正调用过dispatch 函数，并且您的返回类型与axios 调用的返回类型相匹配。您在第二个示例中遇到了同样的问题。

asyncAction() 不会调度操作。 Promise<number> 是动作创建者的返回类型，而不是调度的返回类型。关于缺少属性的错误基本上是告诉你调度没有返回Promise。

您以一种非常混乱和令人困惑的方式编写了asyncAction，但基本上它是一个返回一个函数的函数，该函数接受dispatch 并返回Promise<number>。因此，基于此，您在foo 中获得Promise<number> 的方式不是通过使用您的函数调用dispatch，而是通过将dispatch 作为参数传递给通过调用ayncAction() 创建的函数。

export function foo (dispatch: Dispatch<any, any, any>) {
    const n: Promise<number> = asyncAction()(dispatch);
    console.log(n);
}

这当然没有意义，因为您仍然永远不会在任何地方发送任何东西。

Typescript Playground Link

编辑：

希望这对您要做的事情有所帮助。希望从dispatch 的返回值中获取n 只是为了测试，因为您不能也不应该这样做。

让我们定义我们最终将分发的动作，以及它的创建者。

import { Action } from "redux";

// normal action type
interface NumberAction extends Action {
    payload: number;
}

// normal action creator
function sendNumber(number: number): NumberAction {
    return { type: 'SEND_NUMBER', payload: number };
}

我们创建了一个ThunkAction 来发送这个NumberAction。它是一个将dispatch 作为参数并为最终调度的操作返回Promise 的函数。

const myThunkAction1: ThunkAction<Promise<NumberAction>, any, any, NumberAction> = (dispatch): Promise<NumberAction> => {
    return axios.get('http://www.example.com')
        .then((res: AxiosResponse<any>) => {
            return 1;
        })
        .catch((err: AxiosError<any>) => {
            return 2;
        })
        .then(number => dispatch(sendNumber(number)));
}

我们可以 dispatch 这个，但它返回 ThunkAction 本身。换句话说，调用dispatch 会返回一个接受dispatch 的函数。因此，您无法从调度 thunk 的返回值中获得任何有意义的信息。

export function foo(dispatch: Dispatch<any, any, any>) {
    // still doesn't return Promise<number>, returns the ThunkAction
    const returned = dispatch(myThunkAction2);
    // can only get to Promise<number> by calling the returned thunk, which would re-dispatch the action
    const n: Promise<number> = returned(dispatch, () => {}, {});
    console.log(n);
}

Second Playground Link