如何修复Redux reducer中TypeValidation参数类型不匹配问题？

核心问题在于原PayloadAction的参数类型未关联type字段与data字段的对应关系，导致传入不匹配的类型时无法被TypeScript拦截。以下是具体的修复方案：

步骤1：创建绑定字段类型的联合类型 #

定义一个辅助类型，将TypeValidation中每个字段的type标识与对应data类型严格绑定，生成联合类型：

type ValidationActionPayload = {
  [K in keyof TypeValidation]: {
    type: K;
    data: TypeValidation[K];
  };
}[keyof TypeValidation];

这个类型会自动遍历TypeValidation的所有键，生成每个键对应的type+data组合，最终形成一个包含所有合法组合的联合类型。

步骤2：修改Reducer中的Action类型 #

在validationChange的PayloadAction中使用上述辅助类型作为泛型参数，确保type和data的类型严格匹配：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 原有的TypeValidation接口
interface TypeValidation {
  nin: true | "used" | "wrong" | "check" | false;
  title: true | "plsSelect" | false;
  firstName: true | "plsInsert" | false;
  lastName: true | "plsInsert" | false;
}

// 绑定类型的联合类型
type ValidationActionPayload = {
  [K in keyof TypeValidation]: {
    type: K;
    data: TypeValidation[K];
  };
}[keyof TypeValidation];

const initialState: TypeValidation = {
  nin: false,
  title: false,
  firstName: false,
  lastName: false,
};

const validationSlice = createSlice({
  name: 'validation',
  initialState,
  reducers: {
    validationChange: (state, action: PayloadAction<ValidationActionPayload>) => {
      const { type, data } = action.payload;
      state[type] = data;
    },
  },
});

export const { validationChange } = validationSlice.actions;
export default validationSlice.reducer;

效果验证 #

此时调用dispatch时，TypeScript会自动校验type与data的匹配性：

• 合法调用：

  dispatch(validationChange({ type: "title", data: "plsSelect" })); // 正常通过
  dispatch(validationChange({ type: "nin", data: "used" })); // 正常通过
  

• 非法调用会直接报错：

  dispatch(validationChange({ type: "title", data: "used" })); // TypeScript报错："used"不符合title字段的类型
  

内容的提问来源于stack exchange，提问作者armada45