간단한 할 일 목록을 위해 TypeScript로 Vite 설정-JS 튜토리얼-php.cn

간단한 할 일 목록을 위해 TypeScript로 Vite 설정

Susan Sarandon

풀어 주다： 2025-01-17 04:31:08

원래의

604명이 탐색했습니다.

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

이 튜토리얼에서는 Vite 및 TypeScript를 사용하여 기본적인 할 일 목록 앱을 만드는 과정을 안내합니다. 우리는 외부 프레임워크나 라이브러리 없이 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 템플릿을 사용하여 간단한 TypeScript 애플리케이션에 이상적인 Vite 프로젝트인 vanilla-ts가 생성됩니다. 종속성을 설치한 후 원하는 코드 편집기에서 프로젝트를 엽니다.

프로젝트 구조

프로젝트 디렉토리의 구조는 다음과 같습니다.

<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 코드는 할 일 목록의 핵심 기능인 작업 추가, 완료, 삭제를 구현합니다.

수정 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를 사용하여 간단한 할 일 목록 애플리케이션을 구축하는 명확한 경로를 제공합니다. 필요에 따라 UI 프레임워크 또는 추가 스타일을 통합하여 이 기반을 확장할 수 있습니다.

위 내용은 간단한 할 일 목록을 위해 TypeScript로 Vite 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!