React/TypeScript编写ToDo应用时遇到Props类型错误求助

错误根源 #

你的ToDoItem组件定义的Props接口ToDoItemProps明确要求接收id、text、done三个独立属性，但在TodoApp里你却给它传了一个名叫todo的对象属性——TypeScript的类型校验会严格匹配属性名，所以才会抛出todo属性不存在于ToDoItemProps的错误，这不是IDE的问题，是代码的属性传递和接收逻辑不匹配。

两种修复方案 #

方案1：解构传递属性 #

在TodoApp渲染列表时，把每个todo对象的属性拆开传递，同时记得把key属性放在ToDoItem上（这是React列表渲染的正确规范，不要放在组件内部的li里）：

const TodoApp = () => {
    return (
        <ul>
            {todos.map((todo) => {
                return <ToDoItem key={todo.id} id={todo.id} text={todo.text} done={todo.done} />
            })}
        </ul>
    )
};

方案2：修改Props接口适配对象传递 #

如果想保持直接传todo对象的写法，就调整ToDoItem的Props接口，让它接收todo属性，再在组件内部解构使用：

interface ToDoItemProps {
  todo: {
    id: number;
    text: string;
    done: boolean;
  };
}

const ToDoItem = ({ todo }: ToDoItemProps) => {
  const { id, text, done } = todo;
  return (
    <li>
      <input type="checkbox" checked={done} />
      {text}
    </li>
  );
};

const TodoApp = () => {
    return (
        <ul>
            {todos.map((todo) => {
                return <ToDoItem key={todo.id} todo={todo} />
            })}
        </ul>
    )
};

内容的提问来源于stack exchange，提问作者bakrall