项目实践

2024-10-06
作者大苹果
~5.05 K字

TypeScript 项目实践：待办事项应用（Todo App）

本项目是一个简单的待办事项应用，使用 TypeScript 和 React 构建，支持添加、删除和标记待办事项。下面将详细介绍项目的功能、步骤和完整代码。

1. 功能介绍

添加待办事项：用户可以输入待办事项并添加到列表中。
删除待办事项：用户可以删除已完成或不再需要的待办事项。
标记待办事项：用户可以标记待办事项为完成状态。
存储待办事项：使用 Local Storage 保存待办事项，使其在页面刷新后仍然可用。

2. 项目步骤

2.1 创建项目

初始化项目：

npx create-react-app todo-app --template typescript
cd todo-app

安装依赖：
```
npm install uuid
```

2.2 项目结构

todo-app/
├── public/
├── src/
│   ├── components/
│   │   ├── TodoItem.tsx
│   │   └── TodoList.tsx
│   ├── App.tsx
│   ├── index.tsx
│   ├── styles.css
│   └── types.ts
├── package.json
└── tsconfig.json

2.3 创建类型定义

创建 src/types.ts 文件：

export interface Todo {
    id: string;
    text: string;
    completed: boolean;
}

2.4 创建待办事项项组件

创建 src/components/TodoItem.tsx 文件：

import React from 'react';
import { Todo } from '../types';

interface TodoItemProps {
    todo: Todo;
    onToggle: (id: string) => void;
    onDelete: (id: string) => void;
}

const TodoItem: React.FC<TodoItemProps> = ({ todo, onToggle, onDelete }) => {
    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => onToggle(todo.id)}
            />
            <span
                style={{
                    textDecoration: todo.completed ? 'line-through' : 'none',
                    marginLeft: '8px',
                }}
            >
                {todo.text}
            </span>
            <button onClick={() => onDelete(todo.id)} style={{ marginLeft: '8px' }}>
                Delete
            </button>
        </div>
    );
};

export default TodoItem;

2.5 创建待办事项列表组件

创建 src/components/TodoList.tsx 文件：

import React from 'react';
import { Todo } from '../types';
import TodoItem from './TodoItem';

interface TodoListProps {
    todos: Todo[];
    onToggle: (id: string) => void;
    onDelete: (id: string) => void;
}

const TodoList: React.FC<TodoListProps> = ({ todos, onToggle, onDelete }) => {
    return (
        <div>
            {todos.map(todo => (
                <TodoItem
                    key={todo.id}
                    todo={todo}
                    onToggle={onToggle}
                    onDelete={onDelete}
                />
            ))}
        </div>
    );
};

export default TodoList;

2.6 创建主应用组件

修改 src/App.tsx 文件：

import React, { useState, useEffect } from 'react';
import { Todo } from './types';
import TodoList from './components/TodoList';

const App: React.FC = () => {
    const [todos, setTodos] = useState<Todo[]>([]);
    const [newTodo, setNewTodo] = useState<string>('');

    useEffect(() => {
        const storedTodos = localStorage.getItem('todos');
        if (storedTodos) {
            setTodos(JSON.parse(storedTodos));
        }
    }, []);

    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);

    const addTodo = () => {
        if (!newTodo) return;

        const todo: Todo = {
            id: Date.now().toString(),
            text: newTodo,
            completed: false,
        };

        setTodos([...todos, todo]);
        setNewTodo('');
    };

    const toggleTodo = (id: string) => {
        setTodos(todos.map(todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)));
    };

    const deleteTodo = (id: string) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    return (
        <div style={{ padding: '20px' }}>
            <h1>Todo App</h1>
            <input
                type="text"
                value={newTodo}
                onChange={e => setNewTodo(e.target.value)}
                placeholder="Add a new todo"
            />
            <button onClick={addTodo}>Add Todo</button>
            <TodoList todos={todos} onToggle={toggleTodo} onDelete={deleteTodo} />
        </div>
    );
};

export default App;

2.7 添加样式

创建或修改 src/styles.css 文件（可选）：

body {
    font-family: Arial, sans-serif;
}

input {
    margin-right: 8px;
}

在 src/index.tsx 文件中引入样式：

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css'; // 引入样式
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

2.8 运行应用

在项目目录中运行以下命令启动应用：

npm start

3. 项目测试与展示

3.1 使用方式

打开浏览器，访问 http://localhost:3000。
在输入框中输入待办事项并点击“Add Todo”按钮。
使用复选框标记待办事项为完成或未完成。
点击“Delete”按钮删除待办事项。
页面刷新后，待办事项会自动从 Local Storage 中恢复。

3.2 代码总结

这个简单的待办事项应用展示了如何使用 TypeScript 和 React 构建一个基本的功能应用。通过管理状态、处理用户输入以及持久化数据，我们实现了一个完整的待办事项管理工具。该项目可以作为更复杂项目的基础，进一步扩展功能，如编辑待办事项、分类、过滤等。

4. 项目扩展

用户认证：可以添加用户注册和登录功能，使用 Firebase 或其他后端服务。
多用户支持：实现多用户的待办事项管理。
拖放功能：使用库如 react-beautiful-dnd 增加拖放排序功能。
样式优化：使用 CSS 框架如 Bootstrap 或 Material-UI 提升用户界面。

以上是完整的 TypeScript 项目实践，适合入门和提升开发者的技能。希望能对你有所帮助！

大苹果