Giới thiệu

Chào mừng bạn đến với hướng dẫn chi tiết về việc xây dựng một ứng dụng danh sách công việc đơn giản bằng Vite và TypeScript. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn từng bước để thiết lập một dự án từ đầu và tạo ra một ứng dụng cơ bản mà không cần sử dụng bất kỳ framework nào.

Thiết lập Dự Án Vite

Để bắt đầu, bạn cần chắc chắn rằng Node.js và npm đã được cài đặt trên máy tính của bạn. Nếu bạn chưa cài đặt, hãy truy cập trang web chính thức của Node.js để làm theo hướng dẫn. Sau khi đã cài đặt xong, hãy mở terminal và thực hiện các lệnh sau:

# Tạo một dự án Vite mới
npm create vite@latest my-todo-app -- --template vanilla-ts

# Di chuyển vào thư mục dự án
cd my-todo-app

# Cài đặt các thư viện phụ thuộc
npm install

# Mở dự án trong trình soạn thảo mã
code .

Những lệnh trên sẽ tổ chức một thư mục mới mang tên my-todo-app với cấu trúc một dự án Vite cơ bản được thiết lập với TypeScript. Lệnh npm create vite@latest sẽ tạo ra cấu trúc dự án sử dụng template vanilla-ts, rất phù hợp với nhu cầu phát triển của chúng ta.

Cấu trúc Dự Án Vite

Sau khi thiết lập xong dự án, bạn sẽ thấy cấu trúc thư mục như sau:

my-todo-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── main.ts
│   └── style.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── package-lock.json

Cấu trúc này bao gồm tất cả các tập tin cần thiết cho một dự án Vite với TypeScript. Trong đó, thư mục src chứa tệp TypeScript chính (main.ts), và thư mục public lưu trữ các tài nguyên tĩnh. Tệp index.html sẽ hoạt động như là điểm vào cho ứng dụng của bạn, trong khi package.json sẽ liệt kê các dependencies và script của dự án.

Chỉnh Sửa Tệp src/main.ts

Tiếp theo, chúng ta sẽ cần chỉnh sửa tệp src/main.ts để thêm chức năng cho ứng dụng danh sách công việc. Bạn hãy thay thế nội dung hiện tại bằng đoạn mã sau:

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

let todos: Todo[] = [];
let nextTodoId = 1;

const todoInput = document.createElement('input');
todoInput.type = 'text';
todoInput.placeholder = 'Nhập công việc mới';

const addButton = document.createElement('button');
addButton.textContent = 'Thêm công việc';

const todoList = document.createElement('ul');

document.body.appendChild(todoInput);
document.body.appendChild(addButton);
document.body.appendChild(todoList);

function renderTodos() {
  todoList.innerHTML = '';
  todos.forEach(todo => {
    const listItem = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = todo.completed;
    checkbox.addEventListener('change', () => toggleTodo(todo.id));

    const label = document.createElement('label');
    label.textContent = todo.text;
    label.style.textDecoration = todo.completed ? 'line-through' : 'none';

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Xóa';
    deleteButton.addEventListener('click', () => deleteTodo(todo.id));

    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(deleteButton);
    todoList.appendChild(listItem);
  });
}

function addTodo() {
  const text = todoInput.value.trim();
  if (!text) return;
  const newTodo: Todo = {
    id: nextTodoId++,
    text: text,
    completed: false,
  };
  todos.push(newTodo);
  todoInput.value = '';
  renderTodos();
}

function toggleTodo(id: number) {
  todos = todos.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  );
  renderTodos();
}

function deleteTodo(id: number) {
  todos = todos.filter(todo => todo.id !== id);
  renderTodos();
}

addButton.addEventListener('click', addTodo);

renderTodos();

Đoạn mã này thiết lập chức năng cho danh sách công việc của bạn, cho phép thêm nhiệm vụ mới, đánh dấu hoàn thành và xóa nhiệm vụ. TypeScript được sử dụng để định nghĩa cấu trúc của các mục nhiệm vụ, giúp đảm bảo an toàn kiểu trong toàn bộ mã của chúng ta.

Cập Nhật Tệp index.html

Tiếp đến, chúng ta cần cập nhật tệp index.html để tích hợp mã TypeScript mà bạn đã viết. Thay thế nội dung của index.html như sau:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ứng Dụng Danh Sách Công Việc với Vite và TypeScript</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Tệp HTML này sẽ phục vụ như là điểm vào cho ứng dụng của chúng ta và bao gồm một thẻ script trỏ đến tệp main.ts, cho phép mã TypeScript hoạt động trên trình duyệt của bạn.

Khởi Chạy Máy Chủ Phát Triển

Để xem ứng dụng danh sách công việc hoạt động, quay lại terminal và chạy lệnh sau:

npm run dev

Lệnh này sẽ khởi động máy chủ phát triển Vite, đóng gói mã của bạn và phục vụ tại địa chỉ http://localhost:5173. Mở địa chỉ này trong trình duyệt để thấy ứng dụng của bạn hoạt động. Khi bạn đã hoàn tất phát triển mã và muốn xây dựng bản sản phẩm, hãy sử dụng lệnh sau:

npm run build

Lệnh trên sẽ tạo ra bản build production của ứng dụng trong thư mục dist, nơi bạn có thể phục vụ đến người dùng của mình.

Kết Luận

Trong bài viết này, chúng tôi đã hướng dẫn bạn thiết lập một dự án Vite với TypeScript để xây dựng một ứng dụng danh sách công việc cơ bản. Qua đó, bạn có thể thấy rằng quá trình thiết lập là rất dễ dàng và bạn đã có được một ứng dụng với nhiều chức năng đơn giản. Vite giúp bạn giảm thiểu sự phức tạp trong việc đóng gói, cho phép bạn tập trung vào việc phát triển ứng dụng của mình. Bạn cũng có thể mở rộng ứng dụng này bằng cách tích hợp các framework UI như React, Vue, hoặc thêm các thư viện CSS như TailwindCSS để làm phong phú thêm cho giao diện người dùng của bạn. Cảm ơn bạn đã theo dõi hướng dẫn này!
source: viblo