Maison >interface Web >js tutoriel >Configuration de Vite avec TypeScript pour une liste de tâches simple

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

Susan Sarandonoriginal: 2025-01-17 04:31:08612parcourir

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>

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>

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>

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>

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!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Différentes façons de faire des requêtes HTTP en JavaScriptArticle suivant：Différentes façons de faire des requêtes HTTP en JavaScript

Articles Liés

Voir plus