使用 typescript 编写减速器。 我该如何纠正错误？

Question

I use typescript, react, redux, typessafe-actions.

I have this error.

No overload matches this call. Overload 1 of 2, '(...items: ConcatArray[]): List[]', gave the following error. Argument of type '{ id: number; name: string | undefined; email: string | undefined; gender: string | undefined; }' is not assignable to parameter of type 'ConcatArray'. Object literal may only specify known properties, and 'id' does not exist in type 'ConcatArray'.ts(2769)

This is error code.

id: Math.max(...state.map((todo) => todo.id)) + 1,

I modified the id type to correct the error, but the error cannot be solved. How should I fix it?

// <Types.d.ts>
    export interface PersonType {
      id?: number;
      name?: string;
      email?: string;
      gender?: string;
    }

// <PeopleReducers.ts>

    import { ActionType, createAction, createReducer } from "typesafe-actions";
    import { PersonType } from "../../types";
    
    export const ADD_LIST = "people/ADD_LIST";
    export const DELETE_LIST = "people/DELETE_LIST";
    
    export const addList = createAction(
      ADD_LIST,
      ({ id, name, email, gender }: PersonType) => ({
        id,
        name,
        email,
        gender,
      })
    )();
    export const deleteList = createAction(DELETE_LIST, ({ id }) => ({
      id,
    }))();
    
    const actions = { addList, deleteList };
    type ListAction = ActionType<typeof actions>;
    
    export type List = {
      id: number;
      name: string;
      email: string;
      gender: string;
    };
    type ListState = List[];
    
    const initialState: ListState = [];
    
    const list = createReducer<ListState, ListAction>(initialState, {
      [ADD_LIST]: (state, { payload: { name, email, gender } }) =>
        state.concat({
          id: Math.max(...state.map((todo) => todo.id)) + 1, // This is error line
          name,
          email,
          gender,
        }),
      [DELETE_LIST]: (state, { payload: { id } }) =>
        state.filter((item) => item.id !== id),
    });
    export default list;

//  <Row component>


    import { PersonType } from "../types";
    
    export default function Row({ name, email, gender }: PersonType) {
      return (
        <>
          <p>{name}</p>
          <p>{email}</p>
          <p>{gender}</p>
        </>
      );
    }

Answer 1

Problem: Possibly Undefined Properties

The error is confusingly worded, but the issue is that the properties name , email , and gender are defined as optional in the payload from the action creator ( PersonType ). When you concat an item to the state List[] it must be a complete List object. So these optional properties are a problem.

Bad Solution: Set Defaults

You can prevent errors by defaulting all of the payload properties to an empty string.

[ADD_LIST]: (state, { payload: { name = "", email = "", gender = "" } }) =>
  state.concat({
    id: Math.max(...state.map((todo) => todo.id)) + 1,
    name,
    email,
    gender
  }),

Good Solution: Fix the Action

It is always better to tackle the problem as the source. Why are we allowing these required properties to be optional in the action creator? We want to require all properties except that we don't want an id because we are going to create that ourselves.

export const addList = createAction(
  ADD_LIST,
  ({ name, email, gender }: Omit<List, "id">) => ({
    name,
    email,
    gender
  })
)();

or simply:

export const addList = createAction(
  ADD_LIST,
  (payload: Omit<List, "id">) => payload
)();

Now your reducer can stay the same as it was before. The errors will be gone because the required properties are known to be present in the action payload .