Configuration de Vite avec TypeScript pour une liste de tâches simple-js tutoriel-php.cn

Configuration de Vite avec TypeScript pour une liste de tâches simple

Susan Sarandon

Libérer： 2025-01-17 04:31:08

original

606 Les gens l'ont consulté

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

Ce tutoriel vous guide dans la création d'une application de liste de tâches de base à l'aide de Vite et TypeScript. Nous garderons les choses simples, en nous concentrant sur les fonctionnalités de base de Vite sans frameworks ni bibliothèques externes.

Configuration du projet

Assurez-vous que Node.js et npm sont installés. Ensuite, utilisez votre terminal pour créer et initialiser le projet :

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

Copier après la connexion

Cela crée my-todo-app, un projet Vite utilisant le modèle vanilla-ts, idéal pour une simple application TypeScript. Après avoir installé les dépendances, ouvrez le projet dans votre éditeur de code préféré.

Structure du projet

Votre répertoire de projet aura cette 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>

Copier après la connexion

src/main.ts contient la logique de votre application, public/ contient des actifs statiques et index.html est le point d'entrée. package.json gère les dépendances.

Modification src/main.ts

Remplacez le contenu de src/main.ts par ce 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>

Copier après la connexion

Ce code TypeScript implémente la fonctionnalité principale de la liste de tâches : ajouter, terminer et supprimer des tâches.

Modification index.html

Mise à jour index.html avec ce contenu :

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

Copier après la connexion

Cela inclut simplement le main.ts script. Le rendu réel se produit dynamiquement dans JavaScript.

Exécution du serveur de développement et construction

Exécutez npm run dev pour démarrer le serveur de développement (accessible sur http://localhost:5173). Pour une version de production, utilisez npm run build. Cela crée une version prête pour la production dans le dossier dist.

Ce guide simplifié fournit un chemin clair pour créer une application simple de liste de tâches à l'aide de Vite et TypeScript. Vous pouvez développer cette base en intégrant des frameworks d'interface utilisateur ou un style supplémentaire si nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!