투두 리스트 만들기

데이터 만들기

src/data.ts
export const data = [
  { id: 1, task: "장보기", complete: true },
  { id: 2, task: "TS 학습", complete: false },
];

투두 리스트 하나를 만들고 출력해주기

src/TodoItem.ts
class TodoItem {
  constructor(
    public id: number,
    public task: string,
    public complete: boolean = false
  ) {
    this.id = id;
    this.task = task;
    this.complete = complete;
  }

  printDetails(): void {
    console.log(
      `${this.id}\t${this.task}\t${this.complete ? "\t(complete)" : ""}`
    );
  }
}

export default TodoItem;

투두 아이템 id를 만들어주고, 완료 표시 만들어주기

src/TodoCollection.ts
import TodoItem from "./TodoItem";

class TodoCollection {
  private nextId: number = 1;
  //초기값을 바로 정의해줘야됨

  constructor(public userName: string, public todoItems: TodoItem[] = []) {}

  getTodoById(id: number): TodoItem | undefined {
    return this.todoItems.find(item => item.id === id);
  }
  //   item.id === id와 같은 것을 item으로 찾아줌
  //   return 받는게 한 투두 아이템 이기 때문에 TodoItem으로 반환값 타입을 지정하면 return에 에러가 나는데
  //   반환 받을 수 있는 투두 아이템이 없을수도 있기 때문에 에러가 나는 것
  //   따라서 없는 경우도 생각하여 undefined도 같이 타입을 지정해줘야됨

  addTodo(task: string): number {
    while (this.getTodoById(this.nextId)) {
      this.nextId++;
    }
    // this.getTodoById(this.nextId)이 아이디로 찾았을 때 있다면 아이디를 하나씩 더해줌.
    this.todoItems.push(new TodoItem(this.nextId, task));
    // 새로운 todoitems에 넣어줌.
    return this.nextId;
  }

  markComplete(id: number, complete: boolean): void {
    const todoItem = this.getTodoById(id);
    // 아이디로 todoItem을 찾기
    if (todoItem) {
      // todoItem을 찾았다면
      todoItem.complete = complete;
      //   완료 표시 해주기
    }
  }
}

export default TodoCollection;

샘플 데이터를 만들고 거기에 추가하고 완료 표시 바꿔보기

src/index.ts
import TodoCollection from "./TodoCollection";
import TodoItem from "./TodoItem";
import { data } from "./data";

const sampleTodos: TodoItem[] = data.map(
  item => new TodoItem(item.id, item.task, item.complete)
);
//투두 아이템들의 배열을 있는 데이터에 map을 통해 다 가져와준다.

const myTodoCollection = new TodoCollection("My Todo List", sampleTodos);
// sampleTodos가 모여있는 TodoCollection를 선언

myTodoCollection.addTodo("JavaScript 학습하기");
myTodoCollection.addTodo("친구 만나기");

myTodoCollection.markComplete(3, true);

console.log(`${myTodoCollection.userName}`);
myTodoCollection.todoItems.forEach(item => item.printDetails());

npm start

[run] My Todo List
[run] 1 장보기          (complete)
[run] 2 TS 학습
[run] 3 JavaScript 학습하기             (complete)
[run] 4 친구 만나기