Pu sh для массива React с помощью TypeScript

Question

Я пытаюсь добавить объект задачи в массив задач с помощью метода addTask, этот метод позволяет получить предыдущее состояние и добавить новую задачу, он работает с JSX, но не при использовании TypeScript. Я получаю ошибку

Type 'ITask[] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.  TS2569

import React, { Fragment } from 'react';

interface ITask {
    name: string;
    done: boolean;
}

interface IProps {

}

interface IState {
    newTask?: string;
    tasks?: Array<ITask>;
}

class App extends React.Component<IProps, IState>{
    constructor(props: any) {
        super(props);
        this.state = {
            newTask: '',
            tasks: []
        }
    }


    addTask(name:string) {
        this.setState(prevState => ({
            tasks: [...prevState.tasks, {name, done: false}]
        }));
    }

    render() {
        return (
            <Fragment>
            </Fragment>
        );
    }
}

Answer 1

Возможно, вам придется явно ввести новый объект как ITask, чтобы сообщить компилятору TypeScript, что вы переводите объект типа ITask в состояние tasks.

Кроме того, tasks необязательно. Один из способов обойти это - установить значение по умолчанию (пустой массив []) при его распространении.

addTask(name:string) {
  const newTask: ITask = {name, done: false}
  this.setState((prevState) => ({
    tasks: [...(prevState.tasks ?? []), newTask]
  }));
}

Учитывая, что tasks (и даже newTask) фактически назначено значение в конструкторе, на самом деле нет необходимости помечать его как необязательное для вашего IState интерфейса.

interface IState {
  newTask: string;
  tasks: Array<ITask>;
}

Это избавит вас от необходимости проверять, является ли tasks undefined, когда вы устанавливают состояние.

Answer 2

Вы должны привести тип {name, done: false} к ITask перед добавлением его в массив:

tasks: [...(prevState.tasks ?? []), {name: name, done: false} as ITask]

Answer 3

Вы должны правильно объявить оба поля внутри объекта для передачи.

// use: {name: name, done: false}
addTask(name:string) {
    this.setState(prevState => ({
        tasks: [...prevState.tasks, {name: name, done: false}]
    }));
}