feat: TodoList 컴포넌트 클래스 + ts 변환

Author: bgyoons

src/App.ts

@@ -6,7 +6,7 @@ import { setItem } from "./utils/storage.js";
 import { TodoCount as TodoCnt, TodoItem } from "./types/todo.js";
 
 export default class App {
-  // todoList: TodoList;
+  todoList: TodoList;
   // todoCount: TodoCount;
 
   constructor(
@@ -24,11 +24,11 @@ export default class App {
     //   },
     // });
 
-    // this.todoList = new TodoList({
-    //   $target: this.$target,
-    //   initialState: this.initialState,
-    //   updateCount: (state: TodoItem[]) => this.updateCount(state),
-    // });
+    this.todoList = new TodoList(
+      this.$target,
+      this.initialState,
+      (state: TodoItem[]) => this.updateCount(state)
+    );
 
     // this.todoCount = new TodoCount({
     //   $target: this.$target,
@@ -37,10 +37,10 @@ export default class App {
   }
 
   // 카운트 업데이트
-  // updateCount(todoList: TodoItem[]) {
-  // const done = todoList.filter((todo) => todo.isCompleted).length;
-  // const nextState = { total: todoList.length, done };
-  // this.todoCount.setState(nextState);
-  // setItem("count", JSON.stringify(nextState));
-  // };
+  updateCount(todoList: TodoItem[]) {
+    // const done = todoList.filter((todo) => todo.isCompleted).length;
+    // const nextState = { total: todoList.length, done };
+    // this.todoCount.setState(nextState);
+    // setItem("count", JSON.stringify(nextState));
+  };
 }

src/components/TodoList.ts

@@ -1,27 +1,58 @@
 import { setItem } from "../utils/storage.js";
 import validation from "../utils/validation.js";
+import { TodoItem } from "../types/todo.js";
 
-// params.$target - 해당 컴포넌트가 추가될 DOM 앨리먼트
-// params.initialState - 해당 컴포넌트의 초기 상태
-export default function TodoList({ $target, initialState, updateCount }) {
-  validation.newTarget(new.target);
+export default class TodoList {
+  state: TodoItem[] = [];
+  $todoList = document.createElement("div");
 
-  const $todoList = document.createElement("div");
-  $target.appendChild($todoList);
+  constructor(
+    private readonly $target: HTMLElement,
+    private readonly initialState: TodoItem[],
+    private readonly updateCount: (state: TodoItem[]) => void
+  ) {
+    this.$target.appendChild(this.$todoList);
 
-  if (Array.isArray(initialState)) this.state = initialState;
-  else this.state = [];
+    if (Array.isArray(this.initialState)) this.state = this.initialState;
+    else this.state = [];
 
-  this.setState = (nextState) => {
+    this.render();
+
+    this.$todoList.addEventListener("click", (e) => {
+      const target = e.target as HTMLLIElement;
+      const $li = target.closest("li");
+
+      if ($li) {
+        const newState = [...this.state];
+        const index = +($li.dataset.index as string);
+
+        if (target.className === "deleteBtn") {
+          newState.splice(index, 1);
+          this.setState(newState);
+        } else if (target.className.includes("todoList")) {
+          const isCompleted = target.className.includes("completed");
+          if (isCompleted) target.classList.remove("completed");
+          else target.classList.add("completed");
+          newState[index] = {
+            ...newState[index],
+            isCompleted: !isCompleted,
+          };
+          this.setState(newState);
+        }
+      }
+    });
+  }
+
+  setState(nextState: TodoItem[]) {
     const newState = validation.state(nextState);
     this.state = newState;
     setItem("todo", JSON.stringify(newState));
-    updateCount(newState);
+    this.updateCount(newState);
     this.render();
   };
 
-  this.render = () => {
-    $todoList.innerHTML = `
+  render() {
+    this.$todoList.innerHTML = `
       <ul>
         ${this.state
         .map(
@@ -37,32 +68,4 @@ export default function TodoList({ $target, initialState, updateCount }) {
       </ul>
     `;
   };
-
-  $todoList.addEventListener("click", (e) => {
-    const { target } = e;
-    const $li = target.closest("li");
-
-    if ($li) {
-      const newState = [...this.state];
-      const { index } = $li.dataset;
-
-      if (target.className === "deleteBtn") {
-        newState.splice(index, 1);
-        this.setState(newState);
-      } else if (target.className.includes("todoList")) {
-        const isCompleted = target.className.includes("completed");
-
-        if (isCompleted) target.classList.remove("completed");
-        else target.classList.add("completed");
-
-        newState[index] = {
-          ...newState[index],
-          isCompleted: !isCompleted,
-        };
-        this.setState(newState);
-      }
-    }
-  });
-
-  this.render();
 }

src/utils/validation.ts

@@ -1,10 +1,12 @@
+import { TodoItem } from "../types/todo.js";
+
 const validation = {
   newTarget(target) {
     if (!target) {
       throw new Error("You must use new keyword");
     }
   },
-  state(todoList) {
+  state(todoList: TodoItem[]) {
     return todoList.filter(
       (todo) =>
         typeof todo?.text === "string" && typeof todo?.isCompleted === "boolean"