Setting up Vite with TypeScript for a Simple To-Do List-JS Tutorial-php.cn

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

Susan Sarandon

Release： 2025-01-17 04:31:08

Original

604 people have browsed it

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

This tutorial guides you through creating a basic to-do list app using Vite and TypeScript. We'll keep things straightforward, focusing on Vite's core functionality without external frameworks or libraries.

Project Setup

Ensure Node.js and npm are installed. Then, use your terminal to create and initialize the project:

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

Copy after login

This creates my-todo-app, a Vite project using the vanilla-ts template, ideal for a simple TypeScript application. After installing dependencies, open the project in your preferred code editor.

Project Structure

Your project directory will have this structure:

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

Copy after login

src/main.ts contains your application logic, public/ holds static assets, and index.html is the entry point. package.json manages dependencies.

Modifying src/main.ts

Replace the contents of src/main.ts with this code:

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

Copy after login

This TypeScript code implements the to-do list's core functionality: adding, completing, and deleting tasks.

Modifying index.html

Update index.html with this content:

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

Copy after login

This simply includes the main.ts script. The actual rendering happens dynamically within the JavaScript.

Running the Development Server and Building

Run npm run dev to start the development server (accessible at http://localhost:5173). For a production build, use npm run build. This creates a production-ready version in the dist folder.

This streamlined guide provides a clear path to building a simple to-do list application using Vite and TypeScript. You can expand upon this foundation by integrating UI frameworks or additional styling as needed.

The above is the detailed content of Setting up Vite with TypeScript for a Simple To-Do List. For more information, please follow other related articles on the PHP Chinese website!