React TypeScript项目Redux-Toolkit userSlice角色属性类型报错问题

问题原因 #

初始状态的用户对象仅包含username和password属性，TypeScript据此推断出的用户类型中没有role字段，因此在reducer中尝试为已有用户添加role时触发类型检查错误。

解决方案 #

通过显式定义用户类型，允许role为可选属性，让TypeScript正确识别用户对象的结构：

1. 定义用户类型 #

导入PayloadAction并创建User接口，将role设为可选属性：

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

interface User {
  username: string;
  password: string;
  role?: string; // 可选属性，适配初始无role的用户
}

2. 指定初始状态的类型 #

给initialState指定User[]类型，确保TypeScript使用我们定义的用户类型：

const initialState: User[] = [
  {
    username: "cavidan",
    password: "123123"
  }
];

3. 约束action payload的类型 #

在setUser reducer中，给action指定PayloadAction<User>类型，确保传入的payload符合用户结构：

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser(state, action: PayloadAction<User>) {
      const existingUser = state.find((user) => user.username === action.payload.username);
      if (existingUser) {
        existingUser.role = action.payload.role;
      } else {
        state.push(action.payload);
      }
    },
  },
});

完整修改后的代码 #

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

interface User {
  username: string;
  password: string;
  role?: string;
}

const initialState: User[] = [
  {
    username: "cavidan",
    password: "123123"
  }
];

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser(state, action: PayloadAction<User>) {
      const existingUser = state.find((user) => user.username === action.payload.username);
      if (existingUser) {
        existingUser.role = action.payload.role;
      } else {
        state.push(action.payload);
      }
    },
  },
});

export const { setUser } = userSlice.actions;

export default userSlice.reducer;

这样修改后，TypeScript会允许为已有用户添加role属性，同时保持类型检查的严谨性。

内容的提问来源于stack exchange，提问作者Javidan-R