Redux搭配Typescript使用时keyof在PayloadAction中报错如何解决？

问题原因 #

这个「Unexpected token」语法解析错误，不是keyof的TS类型语法本身错误，是你的代码解析工具无法识别TypeScript语法导致的，同时你的action payload定义和实际调用时传的参数结构也不匹配。

解决步骤 #

1. 检查文件后缀
   所有写TypeScript语法的文件，后缀必须改为.ts（纯逻辑文件）或.tsx（包含JSX的组件文件），不能使用.js/.jsx后缀。

2. 修正ESLint解析配置（如果项目用了ESLint）
   如果你的项目接入了ESLint校验，需要配置支持TS的解析器：

• 先安装依赖：
  npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
• 修改ESLint配置文件（如.eslintrc.js）：

module.exports = {
  // 指定TS解析器
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ]
}

3. 修正payload定义和调用逻辑不匹配的问题
   你当前dispatch时传的参数结构是{"keyA": "newValue"}，但你定义的payload结构是{ key: xxx, value: xxx }，两者不匹配，选其中一种方案修正即可：

方案1：保留你的payload结构 #

修改dispatch调用的参数格式，和定义对齐：

dispatch(setFilter({ key: "keyA", value: "newValue" }))

方案2：调整payload定义适配现有调用（更推荐） #

直接用Partial<Filter>作为泛型参数，既符合你现有调用习惯，还能自带类型校验，传入不存在的key会直接报错：

setFilter: (
  state,
  action: PayloadAction<Partial<Filter>>
) => {
  state.filter = {
    ...state.filter,
    ...action.payload
  };
},

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