What am I doing wrong with this interface for todo list?-CodePudding

My code right now is something like this. but I am now getting An error

What I want to do is I want to declare an array which contain a bunch of ToDo but I am getting an error.

interface ToDo {
  id: number;
  text: string;
  done: boolean;
}

interface InitalToDos {
  initialToDos: ToDo[];
}

const ToDoApp: React.FC = () => {
//error in initialToDos
  const initialToDos: InitalToDos = [
    {
      id: 1,
      text: "Learn React",
      completed: false,
    },
    {
      id: 2,
      text: "Learn TypeScript",
      completed: false,
    },
  ];

Here is the error log

Type '{ id: number; text: string; completed: boolean; }[]' is missing the following properties from type '{ id: number; text: string; completed: boolean; }'

CodePudding user response：

Change the following interface:

interface InitalToDos {
  initialToDos: ToDo[];
}

type InitalToDos = ToDo[];

The core problem was that you were defining an interface for an object that contains a property called initialToDos which holds an array value of ToDos, whereas const initialToDos is just a simple array, not an object.

CodePudding user response：

You are assigning wrong data to type InitalToDos You should do

const initialToDos: InitalToDos = { initialToDos: [... ToDos goes here]}

const initialToDos: ToDo[] =  [... ToDos goes here]

CodePudding user response：

Solution:

interface ToDo {
  id: number;
  text: string;
  completed: boolean;
}

interface InitalToDos {
  initialToDos: ToDo[];
}

const ToDoApp: React.FC = () => {
//error in initialToDos
  const initialToDos: InitalToDos = { initialToDos: [
    {
      id: 1,
      text: "Learn React",
      completed: false,
    },
    {
      id: 2,
      text: "Learn TypeScript",
      completed: false,
    },
  ] }
};