使用 typeof 响应 Redux 操作类型答案

【问题标题】：React Redux Actions Types using typeof使用 typeof 响应 Redux 操作类型
【发布时间】：2021-05-30 16:23:11
【问题描述】：

在下面，reducer 中指定了代码操作类型（操作为 SucceededAction）并且一切正常，但如果我删除（作为 SucceededAction）我收到错误“有效负载不存在于类型 'SucceededAction |失败的行动'。'

现在，如果我将常量替换为 --

type_SUCCEEDED:'type_SUCCEEDED',type_FAILED:'type_FAILED' 并像 type_FAILED 和 type_SUCCEEDED 一样使用它们，而不是 type.FAILED、type.SUCCEEDED，它无需类型转换即可工作。

因此，在下面的代码中，我认为 typeof 不适用于我的操作，因此我必须在减速器中进行类型转换。想知道同样的确切原因。如果您知道原因，请提供帮助，并在这里帮助我找出下面代码中的错误。

谢谢。

//constants
export const type = {
    SUCCEEDED: 'type_SUCCEEDED',
    FAILED: 'type_FAILED'
};

export interface SucceededAction {
  readonly type: typeof type.SUCCEEDED;
  readonly payload: string;
}

export interface FailedAction {
  readonly type: typeof type.FAILED;
}

//actions
export const Succeeded = (payload: string): SucceededAction => ({
  type: type.SUCCEEDED,
  payload,
});

export const Failed = (): FailedAction => ({
  type: type.FAILED,
});

//reducer
export const myReducer = (
  state: string = '',
  action:
    | SucceededAction
    | FailedAction,
): string => {
  switch (action.type) {
    case type.SUCCEEDED:
      return (action as SucceededAction) //type specified
        .payload;
    case type.FAILED:
      return state;
    default:
      return state;
  }
};

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

现在 TypeScript 将 type.SUCCEEDED 和 type.FAILED 视为 string。这意味着您的操作 SucceededAction | FailedAction 只是 { readonly type: string; readonly payload: string; } | { readonly type: string; }。

类型名称需要是字符串文字类型才能区分联合。这可以通过两种方式完成：

1) 枚举

您可以将type 变量设为enum：

export enum type {
    SUCCEEDED = 'type_SUCCEEDED',
    FAILED = 'type_FAILED'
};

TypeScript 枚举既是值又是类型，因此您不再需要使用 typeof。您可以直接将其用作类型，如下所示：

export interface FailedAction {
  readonly type: type.FAILED;
}

文档：Enums

这正是 string 枚举所设计的那种情况。在我看来，这是更好的方法，但还有另一个值得一提的解决方案。

2) 作为常量

您可以使用as const 将变量声明为只读字面量：

export const type = {
    SUCCEEDED: 'type_SUCCEEDED',
    FAILED: 'type_FAILED'
} as const;

文档：const assertions

【讨论】：