使用 TypeScript 构建一个 Todo List 项目

最新推荐文章于 2024-10-03 19:28:47 发布

码农巧克零

最新推荐文章于 2024-10-03 19:28:47 发布

阅读量773

点赞数 25

分类专栏：程序员前端开发编程文章标签： typescript list javascript

本文链接：https://blog.csdn.net/weixin_47588164/article/details/142412332

版权

程序员同时被 3 个专栏收录

149 篇文章 0 订阅

订阅专栏

前端开发

149 篇文章 0 订阅

订阅专栏

编程

149 篇文章 0 订阅

订阅专栏

引言

在现代 JavaScript 开发中，应用的规模和复杂度逐渐增加，而 JavaScript 本身的动态类型特性在某些情况下会带来维护和调试上的挑战。为了解决这些问题，TypeScript 通过在 JavaScript 基础上添加静态类型检查，使代码更加健壮、可维护。因此，学习并掌握 TypeScript 是提升前端开发能力的一个重要步骤。

本文将带你构建一个简单的 Todo List 项目，借此学习 TypeScript 的核心概念，如类型定义、接口、类和模块化。同时，我们也会探讨一些常见的最佳实践。

项目成果展示

项目结构

在项目开始前，我们需要明确文件的组织结构：

plaintext

代码解读

复制代码

todo-list/ │ ├── index.html ├── style.css └── app.ts

index.html 包含页面结构，style.css 负责样式，而 app.ts 是我们编写 TypeScript 逻辑的主要文件。

第一步：设置项目环境

安装 TypeScript

首先，我们需要安装 TypeScript。使用以下命令在项目根目录下安装：

bash

代码解读

复制代码

npm install -g typescript

安装完成后，可以通过以下命令来创建 tsconfig.json 文件，用来管理 TypeScript 编译选项：

bash

代码解读

复制代码

tsc --init

该文件会帮助我们配置 TypeScript 项目的编译细节。

第二步：编写 HTML 和 CSS

HTML 部分

index.html 定义了一个简单的结构，包含一个输入框和一个显示任务的列表：

html

代码解读

复制代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TypeScript Todo List</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>TypeScript Todo List</h1> <input type="text" id="new-todo" placeholder="添加新任务"> <button id="add-todo">添加</button> <ul id="todo-list"></ul> </div> <script src="app.js"></script> </body> </html>

CSS 部分

style.css 用于美化页面，这里简单定义了一些样式：

css

代码解读

复制代码

.container { width: 300px; margin: 50px auto; } h1 { text-align: center; } input, button { width: 100%; margin: 5px 0; padding: 10px; } ul { list-style-type: none; padding: 0; }

第三步：编写 TypeScript 代码

定义 Todo 接口

我们首先需要定义一个 Todo 接口，用来表示任务的结构。TypeScript 的静态类型系统在这里能帮助我们确保所有任务对象的一致性。

typescript

代码解读

复制代码

interface Todo { id: number; title: string; completed: boolean; }

实现 TodoList 类

接下来，我们通过一个 TodoList 类来管理任务的增删操作，并使用 TypeScript 的类和类型功能。

typescript

代码解读

复制代码

class TodoList { todos: Todo[] = []; addTodo(title: string): void { const newTodo: Todo = { id: Date.now(), title, completed: false, }; this.todos.push(newTodo); } removeTodo(id: number): void { this.todos = this.todos.filter(todo => todo.id !== id); } toggleComplete(id: number): void { const todo = this.todos.find(todo => todo.id === id); if (todo) { todo.completed = !todo.completed; } } }

处理 DOM 操作

接下来，我们需要处理页面上的 DOM 操作。TypeScript 通过类型断言确保我们在操作 DOM 元素时有准确的类型。

typescript

代码解读

复制代码

const todoList = new TodoList(); const inputElement = document.getElementById('new-todo') as HTMLInputElement; const addButton = document.getElementById('add-todo') as HTMLButtonElement; const listElement = document.getElementById('todo-list') as HTMLUListElement; addButton.addEventListener('click', () => { if (inputElement.value.trim()) { todoList.addTodo(inputElement.value); inputElement.value = ''; renderTodos(); } });

渲染任务列表

最后，我们编写一个函数来根据 TodoList 中的任务动态更新页面上的任务列表。

typescript

代码解读

复制代码

function renderTodos(): void { listElement.innerHTML = ''; // 清空现有列表 todoList.todos.forEach(todo => { const li = document.createElement('li'); li.textContent = todo.title; const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', () => { todoList.removeTodo(todo.id); renderTodos(); }); li.appendChild(deleteButton); listElement.appendChild(li); }); }

通过调用 renderTodos，每次我们新增或删除任务时，页面上的任务列表都会更新。

第四步：项目扩展思路

到这里，我们已经完成了基本的 Todo List 功能。接下来，考虑一些可能的扩展功能：

状态管理：可以为任务增加过滤器功能，按照完成状态（如已完成、未完成）进行筛选。
任务优先级：使用 TypeScript 的 enum 定义任务的优先级，允许用户给任务设置不同的优先级并排序。
模块化架构：随着应用规模增大，可以引入模块化架构，将不同功能拆分到独立文件中，提高代码的可维护性和可扩展性。

第五步：错误处理

在处理用户输入时，我们可以使用 TypeScript 的类型检查和错误处理来增强应用的鲁棒性。

typescript

代码解读

复制代码

try { if (!inputElement.value.trim()) { throw new Error('任务不能为空'); } todoList.addTodo(inputElement.value); renderTodos(); } catch (error) { alert(error.message); }

通过 try-catch 机制，可以捕获错误并给用户友好的提示信息，从而改善用户体验。