javascript - Typescript + Redux Toolkit, Argument av typen 'T' kan inte tilldelas till parametern av typen 'WritableDraft'

Jag är ny på Typescript och försöker använda Redux-Toolkit med det i min React-applikation. Här försöker jag skapa en To Do-applikation med ett nästlat tillstånd där varje ToDo innehåller en array av Comment. Här är gränssnitten:

Comment.ts

export interface Comment {
    id: number;
    comment: string;
}

ToDo.ts

export interface ToDo {
    id: number;
    title: string;
    description: string;
    comments: Array<Comment>;
}

Sedan i min ToDoSlice:

export const toDoSlice = createSlice({
    name: 'toDoSlice',
    initialState: [] as Array<ToDo>,
    reducers: {
        addToDo: (state, action: PayloadAction<ToDo> ) => {
            state.push(action.payload);
        },
    }
});

TS-kompilatorn ger detta på raden state.push(action.payload):

TS2345: Argument of type 'ToDo' is not assignable to parameter of type 'WritableDraft<ToDo>'.
  Types of property 'comments' are incompatible.
    Type 'Comment[]' is not assignable to type 'WritableDraft<Comment>[]'.
      Type 'Comment' is not assignable to type 'WritableDraft<Comment>'.
        The types of 'ownerDocument.all' are incompatible between these types.
          Type 'HTMLAllCollection' is not assignable to type 'WritableDraft<HTMLAllCollection>'.
            'number' index signatures are incompatible.
              Type 'Element' is not assignable to type 'WritableDraft<Element>'.
                Types of property 'attributes' are incompatible.
                  Type 'NamedNodeMap' is not assignable to type 'WritableDraft<NamedNodeMap>'.
                    'number' index signatures are incompatible.
                      Type 'Attr' is not assignable to type 'WritableDraft<Attr>'.
                        Types of property 'childNodes' are incompatible.
                          Type 'NodeListOf<ChildNode>' is not assignable to type 'WritableDraft<NodeListOf<ChildNode>>'.
                            'number' index signatures are incompatible.
                              Type 'ChildNode' is not assignable to type 'WritableDraft<ChildNode>'.
                                Types of property 'parentElement' are incompatible.
                                  Type 'HTMLElement | null' is not assignable to type 'WritableDraft<HTMLElement> | null'.
                                    Type 'HTMLElement' is not assignable to type 'WritableDraft<HTMLElement>'.
                                      Types of property 'shadowRoot' are incompatible.
                                        Type 'ShadowRoot | null' is not assignable to type 'WritableDraft<ShadowRoot> | null'.
                                          Type 'ShadowRoot' is not assignable to type 'WritableDraft<ShadowRoot>'.
                                            Types of property 'adoptedStyleSheets' are incompatible.
                                              Type 'CSSStyleSheet[]' is not assignable to type 'WritableDraft<CSSStyleSheet>[]'.
                                                Type 'CSSStyleSheet' is not assignable to type 'WritableDraft<CSSStyleSheet>'.
                                                  Types of property 'ownerNode' are incompatible.
                                                    Type 'Element | ProcessingInstruction | null' is not assignable to type 'WritableDraft<Element> | WritableDraft<ProcessingInstruction> | null'.
                                                      Type 'ProcessingInstruction' is not assignable to type 'WritableDraft<Element> | WritableDraft<ProcessingInstruction> | null'.

Jag försökte kasta action.payload till typen WritableDraft<ToDo>, och felet försvinner indeed.

addToDo: (state, action: PayloadAction<ToDo> ) => 
    {state.push(action.payload as WritableDraft<ToDo>);
},

Men ett liknande problem uppstår när jag försöker lägga till en Comment i en befintlig ToDo:

addComment: (state, action: PayloadAction<{toDoId: number, comment: Comment}>) => {
    const toDo = state.find(toDo => toDo.id === action.payload.toDoId);
            
    if (toDo) {
        toDo.comments.push(action.payload.comment);
    }
}

där det ger ett annat fel:

Argument of type 'Comment' is not assignable to parameter of type 'WritableDraft<Comment>'.
  Type 'Comment' is missing the following properties from type 'WritableDraft<Comment>': data, length, ownerDocument, appendData, and 59 more.

och att casta action.payload.comment as WritableDraft<Comment> fungerar inte. Felet förblir nästan detsamma.

Versionen av beroenden inuti package.json:

"dependencies": {
    "@reduxjs/toolkit": "^1.9.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },

Svar #1

I filen ToDo.ts i mappen models behöver du bara importera Comment-gränssnittet från Comment.ts.

import { Comment } from './Comment'

Detta kommer att åtgärda det typescript-felet.

Svar #2

du borde skriva detta:

reducers: {
    addToDo: (state, action: PayloadAction<ToDo> ) => {
        state.push(action.payload as ToDo);
    },