javascript - Typescript + Redux Toolkit，类型 'T' 的参数不可分配给类型 'WritableDraft<T>' 的参数

Question

我是 Typescript 新手，并尝试在我的 React 应用程序中使用 Redux-Toolkit。在这里，我尝试创建一个具有嵌套状态的待办事项应用程序，其中每个 ToDo包含 Comment 的数组。以下是接口(interface):

Comment.ts

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

ToDo.ts

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

然后在我的 ToDoSlice :

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

TS 编译器将其抛出 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'.

---

我尝试转换 action.payload输入WritableDraft<ToDo> ，错误就消失了。

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

但是，当我尝试添加 Comment 时，会出现类似的问题。进入现有的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);
    }
}

它给出另一个错误:

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.

和类型转换action.payload.comment as WritableDraft<Comment>不会的。错误几乎保持不变。

---

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"
  },

Answer 1

在models文件夹内的ToDo.ts文件中，您只需从Comment.ts导入Comment接口(interface)>.

import { Comment } from './Comment'

这将修复 typescript 错误。