Typescript React：如何将我的界面作为道具传递到组件中？

Question

我正在重构我的待办事项列表项目的代码，我的组件文件夹中目前有一个名为“Active”（用于活动任务）的文件。

我的问题是我很难将接口作为道具传递到我的组件中，它返回以下错误：

TS2741: Property 'toDos' is missing in type '{ length: number; toString(): string; toLocaleString(): string; pop(): ToDo | undefined; push(...items: ToDo[]): number; concat(...items: ConcatArray<ToDo>[]): ToDo[]; concat(...items: (ToDo | ConcatArray<...>)[]): ToDo[]; ... 30 more ...; showActive: () => void; }' but required in type '{ newTask: () => void; showActive: () => void; toDos: ToDo[]; }'.

我有一个 Active Tasks 函数，我正在尝试将其导出到我的 App 文件中。我认为 toDos: ToDo[] 就足够了，但它超出了范围

    export const ActiveTasks = (props:{
    newTask: () => void
    showActive: () => void
    toDos: ToDo[]
  }) => (
    <div className="App">
        <div id="completed-task-counter">
          {toDos.length} {toDos.length === 1 ? "Active Task" : "Active Tasks"}
      </div>
</div>
      

上面的错误消息 (TS2741) 是指我的 App.tsx 文件中的以下行：

  if (showingActiveTasks) {
    return <ActiveTasks  newTask={newTask} showActive={showActive} {...toDos} />;
  }

如果我将 toDos prop 定义为 ToDo 数组的扩展运算符，为什么会出现错误？如果 toDos.length 被定义为上面的 prop，为什么会返回 undefined？