シンプルな To-Do リスト用に TypeScript を使用して Vite をセットアップする-jsチュートリアル-php.cn

シンプルな To-Do リスト用に TypeScript を使用して Vite をセットアップする

Susan Sarandon

リリース： 2025-01-17 04:31:08

オリジナル

606 人が閲覧しました

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

このチュートリアルでは、Vite と TypeScript を使用して基本的な To Do リストアプリを作成する方法を説明します。外部フレームワークやライブラリを使用せずに、Vite のコア機能に焦点を当てて、物事を簡単に説明していきます。

プロジェクトのセットアップ

Node.js と npm がインストールされていることを確認します。次に、ターミナルを使用してプロジェクトを作成し、初期化します。

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

ログイン後にコピー

これにより、my-todo-app テンプレートを使用した Vite プロジェクトである vanilla-ts が作成されます。これは、単純な TypeScript アプリケーションに最適です。依存関係をインストールした後、好みのコードエディターでプロジェクトを開きます。

プロジェクトの構造

プロジェクトディレクトリは次の構造になります:

<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 にはアプリケーションロジックが含まれ、public/ には静的アセットが含まれ、index.html はエントリポイントです。 package.json は依存関係を管理します。

src/main.ts

の変更

src/main.ts の内容を次のコードに置き換えます:

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

ログイン後にコピー

この TypeScript コードは、タスクの追加、完了、削除という To-Do リストの中核機能を実装します。

index.html

の変更

次の内容で index.html を更新します:

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

ログイン後にコピー

これには単に main.ts スクリプトが含まれます。実際のレンダリングは JavaScript 内で動的に行われます。

開発サーバーの実行とビルド

npm run dev を実行して開発サーバーを起動します (http://localhost:5173 からアクセス可能)。実稼働ビルドの場合は、npm run build を使用します。これにより、本番環境に対応したバージョンが dist フォルダーに作成されます。

この合理化されたガイドは、Vite と TypeScript を使用してシンプルな To Do リストアプリケーションを構築するための明確な道筋を提供します。必要に応じて、UI フレームワークや追加のスタイルを統合することで、この基盤を拡張できます。

以上がシンプルな To-Do リスト用に TypeScript を使用して Vite をセットアップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。