对TypeScript减速器进行类型检查，以获取操作类型

Question

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

  

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

当减速器收到actionType时，如何正确键入检查？谢谢，您可以在下面看到示例代码。

sampleActionTypes.ts：

   this.OneWayBind(ViewModel,
                    viewModel => viewModel.Employees,
                    view => view.PersonsInOrderDataGrid.ItemsSource)
                .DisposeWith(disposable);

sampleReducer.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;

Answer 1

您的状态在FOO | BAR界面后以SampleState作为键。 您的Types['actionType']是string。

因此，当您执行state[action.actionType]时，您正在执行SampleState[string]。但是SampleState仅接受FOO或BAR！

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

也要小心地命名字段。也许仅用于示例，但是在动作界面中已经有actionType时，type看起来很新，很混乱。

Answer 2

将SampleState接口更新为以下内容可以解决此问题：

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