使用react 和ts完成一个todolist

好的，下面是一个使用React和TypeScript完成的TodoList示例：

首先，创建一个React组件：TodoList.tsx

import React, { useState } from "react";

interface TodoItem {
  id: number;
  content: string;
  completed: boolean;
}

const TodoList = () => {
  const [todos, setTodos] = useState<TodoItem[]>([]);
  const [inputValue, setInputValue] = useState("");

  const handleAddTodo = () => {
    if (inputValue.trim() === "") return;
    const newTodo: TodoItem = {
      id: todos.length,
      content: inputValue,
      completed: false
    };
    setTodos([...todos, newTodo]);
    setInputValue("");
  };

  const handleToggleTodo = (id: number) => {
    const updatedTodos = todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
    setTodos(updatedTodos);
  };

  const handleDeleteTodo = (id: number) => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
        />
        <button onClick={handleAddTodo}>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            style={{ textDecoration: todo.completed ? "line-through" : "none" }}
          >
            {todo.content}
            <button onClick={() => handleToggleTodo(todo.id)}>
              {todo.completed ? "Uncomplete" : "Complete"}
            </button>
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

在这个组件中，我们定义了一个状态todos来存储所有的待办事项，以及一个状态inputValue来存储用户输入的新待办事项的内容。我们通过useState Hook来定义这些状态。

我们还定义了三个处理函数handleAddTodo、handleToggleTodo和handleDeleteTodo来添加、切换完成状态和删除待办事项。我们通过map函数来遍历todos数组，以便将每个待办事项渲染为一个li元素。

最后，我们导出TodoList组件。

接下来，在App.tsx中使用TodoList组件：

import React from "react";
import TodoList from "./TodoList";

const App = () => {
  return (
    <div>
      <TodoList />
    </div>
  );
};

export default App;

现在，我们就可以在浏览器中查看TodoList应用程序了。

注：在使用前需要先安装React和TypeScript的依赖。在终端中执行以下命令：

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom