TypeScript React：接口作为组件Props传入问题及TS2741错误排查

为什么展开数组会触发TS2741错误？ #

你在App.tsx里用{...toDos}展开数组传递props是错误的——数组展开到JSX props中时，会把数组的索引作为属性名，把数组元素作为属性值。比如toDos是[{id:1, text:'任务1'}, {id:2, text:'任务2'}]，展开后会变成：

<ActiveTasks newTask={newTask} showActive={showActive} 0={/*第一个任务*/} 1={/*第二个任务*/} />

但你的ActiveTasks组件的Props明确要求接收一个名为toDos的数组属性，这种展开方式根本没有传递toDos这个prop，所以TypeScript会报错提示你缺少必填属性。

为什么toDos.length返回undefined？ #

因为组件里的toDos根本没接收到正确的数组值——由于你没传递toDos prop，组件里的toDos要么是undefined（如果没设默认值），要么是你误把展开后的索引属性当成了toDos，自然访问length会得到undefined。

正确的解决办法 #

1. 直接传递toDos prop，不要展开数组：
   在App.tsx里改成：

   <ActiveTasks newTask={newTask} showActive={showActive} toDos={toDos} />
   

2. 确认组件Props类型定义正确，确保toDos是ToDo[]类型：
   比如组件里的类型定义应该是：

   interface ActiveTasksProps {
     newTask: /* 你的newTask类型 */;
     showActive: boolean;
     toDos: ToDo[];
   }
   
   const ActiveTasks = ({ newTask, showActive, toDos }: ActiveTasksProps) => {
     // 现在可以正常使用toDos.length了
     return (
       <div>
         {/* 渲染活跃任务 */}
       </div>
     );
   };
   

3. 可选优化：给toDos设置默认值（如果允许组件在没有toDos时正常渲染）：

   const ActiveTasks = ({ newTask, showActive, toDos = [] }: ActiveTasksProps) => {
     // 即使没传toDos，也不会出现length undefined的问题
   };
   

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