在这个教程中，我们将学习如何使用 React 和 TypeScript 创建一个简单的待办事项列表应用。我们将一步一步地构建这个应用，并了解如何利用 TypeScript 提供的类型安全。
安装必要的工具
首先，确保你已经安装了 Node.js 和 npm。然后，创建一个新的 React 应用：
npx create-react-app react-ts-todos
cd react-ts-todos
接下来，安装 TypeScript：
npm install --save-dev typescript @types/react @types/node
运行 npm run build 来构建你的应用。
创建待办事项
我们的待办事项应用将有一个输入框和一个按钮来添加新的待办事项。以下是添加新待办事项的逻辑：
interface ITodo {
id: number;
text: string;
completed: boolean;
}
const todos: ITodo[] = [];
这里我们定义了一个 ITodo 接口，它包含了待办事项的 ID、文本和完成状态。
现在，我们可以在组件中添加一个方法来添加新的待办事项：
function addTodo(text: string): void {
const newTodo: ITodo = {
id: todos.length + 1,
text,
completed: false,
};
todos.push(newTodo);
}
状态管理
在 React 中，我们使用 useState 钩子来管理组件的状态。在这个例子中，我们将使用 useState 来管理待办事项列表：
import React, { useState } from 'react';
function App(): JSX.Element {
const [todos, setTodos] = useState<ITodo[]>([]);
return (
<div>
{/* 待办事项列表 */}
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
{/* 添加待办事项 */}
<input type="text" placeholder="添加待办事项" />
<button onClick={() => addTodo('')}>添加</button>
</div>
);
}
export default App;
在上面的代码中，我们使用 useState 创建了一个名为 todos 的状态变量和一个名为 setTodos 的更新函数。我们使用 map 方法将待办事项列表渲染成一个无序列表。
完成待办事项
为了完成待办事项，我们需要为每个待办事项添加一个按钮，当点击这个按钮时，待办事项的状态将更新为已完成。
function completeTodo(id: number): void {
const updatedTodos = todos.map(todo => {
if (todo.id === id) {
return { ...todo, completed: !todo.completed };
}
return todo;
});
setTodos(updatedTodos);
}
现在，我们需要在渲染待办事项列表时添加一个按钮，并传递待办事项的 ID 给 completeTodo 函数：
return (
<div>
{/* 待办事项列表 */}
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
<button onClick={() => completeTodo(todo.id)}>完成</button>
</li>
))}
</ul>
{/* 添加待办事项 */}
<input type="text" placeholder="添加待办事项" />
<button onClick={() => addTodo('')}>添加</button>
</div>
);
优化
为了使我们的应用更加用户友好，我们可以添加一些额外的功能，例如删除待办事项和搜索功能。