将接口传递给`dispatch时，Redux-thunk ThunkDispatch类型失败 <ShowSnackbar> （{}）`

Question

当将接口应用于redux thunk action的dispatch()函数时，错误检查似乎是错误的。 例如，如果我注释掉一个属性，Typescript会抱怨实际上已启用的属性，并说缺少该属性：

...

type ThunkResult<R> = ThunkAction<R, RootState, undefined, Action>;

export interface ShowSnackbar {
  type: string,
  isOpened: boolean
}

export const showSnackbar = (): ThunkResult<void> => (dispatch, getState) => {

    dispatch<ShowSnackbar>({
        // type: 'baz',
        isOpened: true // <-- 'isOpened' does not exist in type 'ThunkAction<ShowSnackbar ...
    });

}

在检查了redux-thunk ThunkDispatch类型之后，我注意到重载函数的第一个函数声明被忽略，而当我的操作具有注释掉的属性（故意引入的错误）​​时，第二个期望函数的调用被调用：

export interface ThunkDispatch<S, E, A extends Action> {
  <T extends A>(action: T): T;
  <R>(asyncAction: ThunkAction<R, S, E, A>): R;
}

如果说，我删除<R>(asyncAction: ThunkAction<R, S, E, A>): R; ，类型检查恢复正常，TS会正确警告我：

类型'{isOpened：true;中缺少'type'； }”，但在“ ShowSnackbar”类型中为必填项。

我在TS Playground上做了一个演示该问题的演示。

还是我做错了什么？

谢谢！

Answer 1

TypeScript在这里感到困惑，因为它有两种尝试的可能性。 如果您切换ThunkDispatch的顺序， ThunkDispatch您已经获得了您想首先看到的错误消息：

export interface ThunkDispatch<S, E, A extends Action> {
  <R>(asyncAction: ThunkAction<R, S, E, A>): R;
  <T extends A>(action: T): T;
}

类型'{isOpened：true; }”不能分配给“ ShowSnackbar”类型的参数。 类型'{isOpened：true;中缺少属性'type'。 }”，但在“ ShowSnackbar”类型中为必填项。

ShowSnackbar ：我建议向您的ShowSnackbar接口添加extends Action<string> （或Action<'baz'> ），并从其定义中删除type: string 。 这样，您将继续作为一个Action ，即使你以后决定改变行动的东西。 或者，至少当您决定将名称type更改为其他名称时，您会收到错误消息。