对接收动作类型的 TypeScript reducer 进行类型检查答案

【问题标题】：Type-checking a TypeScript reducer receiving action types对接收动作类型的 TypeScript reducer 进行类型检查
【发布时间】：2019-12-26 23:05:39
【问题描述】：

我正在尝试创建一个接受 actionType 作为键值的 TypeScript redux reducer，但是我正在努力为我的状态定义正确的接口。这样做时，我收到以下消息：

TS7053：元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引“SampleState”类型。在“SampleState”类型上找不到带有“字符串”类型参数的索引签名。

当我的 reducer 接收到 actionType 时，如何正确地检查它的类型？谢谢，你可以看到下面的示例代码。

sampleActionTypes.ts：

export const FOO = 'FOO';
export const BAR = 'BAR';
export const TURN_ON = 'TURN_ON';
export const TURN_OFF = 'TURN_OFF';

interface TurnOn {
  type: typeof TURN_ON;
  actionType: string;
}

interface TurnOff {
  type: typeof TURN_OFF;
  actionType: string;
}

export type Types = TurnOn | TurnOff;

sampleReducer.ts：

import { BAR, FOO, TURN_OFF, TURN_ON, Types } from './sampleActionTypes';

export interface SampleState {
  [FOO]: {
    toggle: boolean;
  };
  [BAR]: {
    toggle: boolean;
  };
}

const initialState: SampleState = {
  [FOO]: {
    toggle: false,
  },
  [BAR]: {
    toggle: false,
  },
};

const sampleReducer = (state = initialState, action: Types): SampleState => {
  switch (action.type) {
    case TURN_ON:
      return {
        ...state,
        [action.actionType]: {
          ...state[action.actionType],
          toggle: true,
        },
      };
    case TURN_OFF:
      return {
        ...state,
        [action.actionType]: {
          ...state[action.actionType],
          toggle: false,
        },
      };
    default:
      return state;
  }
};

export default sampleReducer;

【问题讨论】：

标签： typescript redux

【解决方案1】：

您的状态在您的SampleState 接口之后具有FOO | BAR 作为键。而你的Types['actionType'] 是string。

所以当你在做state[action.actionType] 时，你在做SampleState[string]。但是SampleState 只接受FOO 或BAR！

根据您的需要，一个解决方案可能是输入Types['actionType']: (typeof FOO) | (typeof BAR)（类似的东西）。

还要注意如何命名字段。也许这只是为了举例，但是actionType 当动作界面中已经有一个type 时，这似乎是多余的并且相当混乱。

【讨论】：

【解决方案2】：

将SampleState 接口更新为以下解决了这个问题：

export interface SampleState {
  [key: string]: {
    toggle: boolean;
  };
}

【讨论】：