问如何对返回类型与调度类型不同的redux dispatcher进行类型提示？
EN

Stack Overflow用户

提问于 2019-05-20 09:42:02

回答 1查看 258关注 0票数 4

我想输入一个不同于分派类型的操作创建者。

我尝试用这两种类型来提示ThunkResult，但这并不理想。

// types.ts
interface AppListAction extends FetchAction {
  type: typeof APP_LIST,
  [FETCH]: {},
}

interface AppListSuccessAction extends FetchResponseAction {
  type: typeof APP_LIST_SUCCESS,
  response: Array<ListModel>
}

export type AppResponseActions =
  AppListSuccessAction

export type AppActions =
  AppListAction
  | AppResponseActions


// actions.ts
export const loadListCreator = (): AppActions => ({
  type: C_LIST,
  [FETCH]: {},
})

export const loadList = (): ThunkResult<AppResponseActions> => (dispatch: ThunkDispatcher) => dispatch(loadListCreator())

我预计不会出现错误，但我收到的却是：

TypeScript错误:类型'AppActions‘不可分配给类型'AppResponseActions’。类型'AppListAction‘不可赋值给类型'AppResponseActions’。类型“”AppListAction“”中缺少属性“”response“”，但类型“”AppListSuccessAction“”中需要该属性。“”TS2322

typescript

redux

云点播特惠1元起

提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务

回答 1

Stack Overflow用户

发布于 2019-05-27 03:47:15

为了使您的代码可编译，我做了以下假设

import { ThunkAction, ThunkDispatch } from 'redux-thunk';

const FETCH = 'fetch';

interface FetchAction {
    [FETCH]: object;
}

interface FetchResponseAction {
    prop2: string;
}

const APP_LIST = 'APP_LIST';
const APP_LIST_SUCCESS = 'APP_LIST_SUCCESS';

interface ListModel {
    prop3: string;
}

在你的代码之后

type ThunkResult<R> = ThunkAction<R, State, undefined, AppActions>;
type ThunkDispatcher = ThunkDispatch<State, undefined, AppActions>;

根据上面的假设，您的代码可以通过以下修改进行编译

export const loadList = (): ThunkResult<AppActions> => (dispatch: ThunkDispatcher) => dispatch(loadListCreator());

ThunkResult<AppActions>的类型应为R = AppActions。R是ThunkResult类型的函数的返回值。在Redux-Thunk源代码中，ThunkAction的定义如下

export type ThunkAction<
    TReturnType,
    TState,
    TExtraThunkArg,
    TBasicAction extends Action
> = (
    dispatch: ThunkDispatch<TState, TExtraThunkArg, TBasicAction>,
    getState: () => TState,
    extraArgument: TExtraThunkArg
) => TReturnType;

因此ThunkAction ( ThunkResult所基于的)是一个返回值为TReturnType类型的函数。

然后尝试使ThunkResult<>类型的loadlist等于(dispatch: ThunkDispatcher) => dispatch(loadListCreator())。本质上也是函数，但返回的是dispatch调用的结果。dispatch的类型为ThunkDispatcher，from source的类型为

export interface ThunkDispatch<
    TState,
    TExtraThunkArg,
    TBasicAction extends Action
> {
    <TReturnType>(
        thunkAction: ThunkAction<TReturnType, TState, TExtraThunkArg, TBasicAction>
    ): TReturnType;
    <A extends TBasicAction>(action: A): A;
}

所以它是一个重载函数，接受一个类型为A的参数，并返回类型为A的结果。由于dispatch是用返回AppActions类型结果的loadListCreator()调用的结果调用的，因此A被推断为AppActions。

由于您希望将返回AppActions的函数分配给返回AppResponseActions的函数，因此未正确编译原始代码。AppActions是联合类型，可以是AppResponseActions或AppListAction。如果它是AppListAction，则不能将其分配给AppResponseActions。

我想我已经描述得很清楚了:-)

从实践的角度来看，你的代码有点过于复杂了。

考虑这样简化它。