퀴즈 - 타입스크립트로 TODO 리스트 구현

💡 요구 사항

• Todo 항목의 인터페이스 정의(ITodoItem)
• Todo 항목은 id(number), task(string), completed(boolean)
• Todo 리스트를 관리할 수 있는 함수 구현
  1. addTodo: 새로운 Todo 항목을 추가
  2. completeTodo: Todo 항목의 completed 상태를 true로 변경
  3. deleteTodo: Todo 항목을 삭제 각 함수는 Todo 항목 배열을 입력받고, 변경된 배열을 반환
  4. editTodo: Todo 항목의 task를 편집 - 전체 배열 / 수정하고자하는 요소의 id / 새롭게 작성될 task 내용
  5. clearCompleted: 완료된 모든 Todo 항목을 삭제 - 전체 배열
  6. getAllTodos: 모든 Todo 항목을 조회 - 전체 배열
  7. filterTodos: 특정 상태의 Todo 항목을 필터링 - 전체 배열 / 완료 상태(true/false)
  8. toggleTodo: Todo 항목의 completed 상태를 토글 - 전체 배열 / 토글할 항목의 id

 

정답 - 이것만이 정답이 아닙니다~ 다양한 방법으로 구현이 가능합니다

interface ITodoItem {
  id: number;
  task: string;
  completed: boolean;
}
let todos: ITodoItem[] = [];
function addTodo(task: string): ITodoItem[] {
  const newTodo: ITodoItem = {
    id: Math.max(0, ...todos.map((t) => t.id)) + 1,
    // ['a', 'b', 'c']
    // >> [1, 2, 3]
    task: task,
    completed: false,
  };
  todos.push(newTodo);
  return todos;
}

function completedTodo(id: number): ITodoItem[] {
  return (todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: true } : todo,
  ));
}

function deleteTodo(id: number): ITodoItem[] {
  return (todos = todos.filter((todo) => todo.id !== id));
}

function editTodo(id: number, task: string): ITodoItem[] {
  return (todos = todos.map((todo) =>
    todo.id === id ? { ...todo, task: task } : todo,
  ));
}

function clearCompleted(completed: boolean): ITodoItem[] {
  return (todos = todos.filter((todo) => todo.completed === false));
}

function getAllTodos(): void {
  console.log(todos);
}

function filterTodos(completed: boolean): void {
  console.log(todos.filter((todo) => todo.completed === completed));
}

function toggleTodo(id: number): ITodoItem[] {
  return (todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo,
  ));
}

addTodo('타입스크립트 복습하기');
addTodo('자바스크립트 복습하기');
addTodo('HTML/CSS 복습하기');
getAllTodos(); // 호출
completedTodo(1);
completedTodo(2);
getAllTodos(); // 호출
deleteTodo(2);
getAllTodos(); // 호출
filterTodos(true);
filterTodos(false);
getAllTodos(); // 호출
toggleTodo(1);
getAllTodos(); // 호출
toggleTodo(1);
getAllTodos(); // 호출

 

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/TODO-c074fee98d5843d6881d6b8b5cf8e783?pvs=4

퀴즈 - 타입스크립트로 TODO 리스트 구현 | Notion