React+TypeScript待办组件props类型报错，如何解决？

1. 定义Todo数据类型 #

先给单个待办项明确类型，避免item参数为any：

// 定义待办项的结构类型
interface Todo {
  id: number | string; // 根据实际场景选择id类型，比如自增id用number，UUID用string
  task: string;
}

2. 给TodoItems组件的Props添加类型注解 #

修改TodoItems组件，明确接收的props类型：

import { FaTrash } from 'react-icons/fa';

// 定义组件接收的Props类型
interface TodoItemsProps {
  item: Todo;
  removeTask: (id: Todo['id']) => void;
}

const TodoItems = ({ item, removeTask }: TodoItemsProps) => {
  // 注意：React事件需用驼峰式onClick，原代码的onclick不会触发事件
  return (
    <li>
      {item.task} | 
      <FaTrash onClick={() => removeTask(item.id)} />
    </li>
  );
};

export default TodoItems;

3. 规范App组件的状态类型（可选但推荐） #

为了彻底消除项目中的any类型，给App组件的状态和函数参数也加上类型：

import { useState } from 'react';
import TodoItems from './TodoItems';

function App() {
  // 给待办列表状态指定类型
  const [list, setList] = useState<Todo[]>([]);
  // 输入框值的类型明确为string
  const [value, setValue] = useState<string>('');

  // 表单提交事件的参数类型
  const handleInput = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!value.trim()) return;
    const newTodo: Todo = {
      id: Date.now(),
      task: value,
    };
    setList(prev => [...prev, newTodo]);
    setValue('');
  };

  // 删除函数的参数类型
  const removeTask = (id: Todo['id']) => {
    setList(prev => prev.filter(item => item.id !== id));
  };

  return (
    <div className='App'>
      <form onSubmit={handleInput}>
        <input 
          type="text" 
          value={value}
          onChange={e => setValue(e.target.value)}
          className="input" 
          placeholder="添加一个任务"
        />

        <input 
          type="submit"
          className="button"
          value='添加任务'
        />
      </form>

      <div className='itensArea'>
        {list.map((item) => (
          <ul key={item.id}>
            <TodoItems item={item} removeTask={removeTask} />
          </ul>
        ))}
      </div>
    </div>
  );
}

export default App;

重要提醒 #

• 确保将.jsx文件重命名为.tsx，这样TypeScript才能正确解析类型注解。
• 原代码中FaTrash的事件名写错为onclick，React事件必须使用驼峰式onClick，否则点击删除图标不会触发事件。

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