首頁 >web前端 >js教程 >使用 TypeScript 設定 Vite 以獲得簡單的待辦事項列表

使用 TypeScript 設定 Vite 以獲得簡單的待辦事項列表

Susan Sarandon原創: 2025-01-17 04:31:08612瀏覽

Setting up Vite with TypeScript for a Simple To-Do List

本教學將指導您使用 Vite 和 TypeScript 建立一個基本的待辦事項清單應用程式。我們將保持簡單，專注於 Vite 的核心功能，無需外部框架或庫。

項目設定

確保安裝了 Node.js 和 npm。然後，使用終端機建立並初始化項目：

<code class="language-bash"># Create a new Vite project
npm create vite@latest my-todo-app -- --template vanilla-ts

# Navigate to the project directory
cd my-todo-app

# Install dependencies
npm install

# Open in your code editor
code .</code>

這將建立 my-todo-app，一個使用 vanilla-ts 模板的 Vite 項目，非常適合簡單的 TypeScript 應用程式。安裝依賴項後，在您喜歡的程式碼編輯器中開啟專案。

專案結構

您的專案目錄將具有以下結構：

<code>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</code>

src/main.ts 包含您的應用程式邏輯，public/ 保存靜態資產，index.html 是入口點。 package.json 管理依賴關係。

修改src/main.ts

將 src/main.ts 的內容替換為以下程式碼：

<code class="language-typescript">interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

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

const todoInput = document.createElement('input');
todoInput.type = 'text';
todoInput.placeholder = 'Enter a new todo';

const addButton = document.createElement('button');
addButton.textContent = 'Add Todo';

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 = 'Delete';
    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) {
    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();</code>

此 TypeScript 程式碼實現了待辦事項清單的核心功能：新增、完成和刪除任務。

修改index.html

使用以下內容更新index.html：

<code class="language-html"><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS To-Do</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html></code>

這只包含 main.ts 腳本。實際渲染在 JavaScript 中動態發生。

運行開發伺服器並建置

運行 npm run dev 啟動開發伺服器（可透過 http://localhost:5173 存取）。對於生產版本，請使用 npm run build。這將在 dist 資料夾中建立一個生產就緒版本。

這份簡化的指南提供了使用 Vite 和 TypeScript 建立簡單的待辦事項清單應用程式的清晰路徑。您可以根據需要透過整合 UI 框架或其他樣式來擴展此基礎。

以上是使用 TypeScript 設定 Vite 以獲得簡單的待辦事項列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript typescript json html npm Static for Directory using public JS this http ui Foundation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在 JavaScript 中發出 HTTP 請求的不同方法下一篇：在 JavaScript 中發出 HTTP 請求的不同方法

看更多