Rumah >hujung hadapan web >tutorial js >Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah

Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah

Susan Sarandonasal: 2025-01-17 04:31:08612semak imbas

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

Tutorial ini membimbing anda membuat apl senarai tugasan asas menggunakan Vite dan TypeScript. Kami akan memastikan perkara itu mudah, memfokuskan pada fungsi teras Vite tanpa rangka kerja atau perpustakaan luaran.

Persediaan Projek

Pastikan Node.js dan npm dipasang. Kemudian, gunakan terminal anda untuk mencipta dan memulakan projek:

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

Ini mencipta my-todo-app, projek Vite menggunakan templat vanilla-ts, sesuai untuk aplikasi TypeScript yang ringkas. Selepas memasang kebergantungan, buka projek dalam editor kod pilihan anda.

Struktur Projek

Direktori projek anda akan mempunyai struktur ini:

<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 mengandungi logik aplikasi anda, public/ memegang aset statik dan index.html ialah titik masuk. package.json mengurus tanggungan.

Mengubah suai src/main.ts

Ganti kandungan src/main.ts dengan kod ini:

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

Kod TypeScript ini melaksanakan fungsi teras senarai tugasan: menambah, melengkapkan dan memadamkan tugasan.

Mengubah suai index.html

Kemas kini index.html dengan kandungan ini:

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

Ini hanya termasuk skrip main.ts. Paparan sebenar berlaku secara dinamik dalam JavaScript.

Menjalankan Pelayan Pembangunan dan Bangunan

Jalankan npm run dev untuk memulakan pelayan pembangunan (boleh diakses di http://localhost:5173). Untuk binaan pengeluaran, gunakan npm run build. Ini mencipta versi sedia pengeluaran dalam folder dist.

Panduan diperkemas ini menyediakan laluan yang jelas untuk membina aplikasi senarai tugasan yang mudah menggunakan Vite dan TypeScript. Anda boleh mengembangkan asas ini dengan menyepadukan rangka kerja UI atau penggayaan tambahan mengikut keperluan.

Atas ialah kandungan terperinci Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Berbeza untuk Membuat Permintaan HTTP dalam JavaScriptArtikel seterusnya：Cara Berbeza untuk Membuat Permintaan HTTP dalam JavaScript

Artikel berkaitan

Lihat lagi