Home >Web Front-end >JS Tutorial >Setting up Vite with TypeScript for a Simple To-Do List

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

Susan SarandonOriginal: 2025-01-17 04:31:08612browse

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>

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>

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>

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>

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!

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Different Ways to Make HTTP Requests in JavaScriptNext article：Different Ways to Make HTTP Requests in JavaScript

See more

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

Related articles