使用 TypeScript 构建一个 Todo List 项目

最新推荐文章于 2024-10-01 20:12:28 发布

程序员玫玫

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量1k

点赞数 27

文章标签： typescript javascript 前端 react.js 开发语言面试

本文链接：https://blog.csdn.net/2401_86113453/article/details/142414537

版权

引言

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

文末有已成功帮助500多人拿到前端offer的文章！！

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

项目结构

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

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

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

第一步：设置项目环境

安装 TypeScript

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

npm install -g typescript

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

tsc --init

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

第二步：编写 HTML 和 CSS

HTML 部分

index.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 用于美化页面，这里简单定义了一些样式：

.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 的静态类型系统在这里能帮助我们确保所有任务对象的一致性。

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

实现 TodoList 类

接下来，我们通过一个 TodoList 类来管理任务的增删操作，并使用 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 元素时有准确的类型。

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 中的任务动态更新页面上的任务列表。

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 的类型检查和错误处理来增强应用的鲁棒性。

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

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