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

Author: bgyoons

src/App.ts

@@ -5,36 +5,41 @@ import TodoCount from "./components/TodoCount.js";
 import { setItem } from "./utils/storage.js";
 import { TodoCount as TodoCnt, TodoItem } from "./types/todo.js";
 
-export default function App({ $target, initialState, initialCount }) {
-  new Header({
-    $target,
-    text: "Todo List",
-  });
+export default class App {
+  // todoList: TodoList;
+  // todoCount: TodoCount;
 
-  new TodoForm({
-    $target,
-    onSubmit: (text) => {
-      const nextState = [...todoList.state, { text, isCompleted: false }];
-      todoList.setState(nextState);
-    },
-  });
+  constructor(
+    protected readonly $target: HTMLElement,
+    protected readonly initialState: TodoItem[],
+    protected readonly initialCount: TodoCnt
+  ) {
 
-  const todoList = new TodoList({
-    $target,
-    initialState,
-    updateCount: (state) => updateCount(state),
-  });
+    // new TodoForm({
+    //   $target: this.$target,
+    //   onSubmit: (text: string) => {
+    //     const nextState = [...this.todoList.state, { text, isCompleted: false }];
+    //     this.todoList.setState(nextState);
+    //   },
+    // });
 
-  const todoCount = new TodoCount({
-    $target,
-    initialCount,
-  });
+    // this.todoList = new TodoList({
+    //   $target: this.$target,
+    //   initialState: this.initialState,
+    //   updateCount: (state: TodoItem[]) => this.updateCount(state),
+    // });
+
+    // this.todoCount = new TodoCount({
+    //   $target: this.$target,
+    //   initialCount: this.initialCount,
+    // });
+  }
 
   // 카운트 업데이트
-  const updateCount = (todoList) => {
-    const done = todoList.filter((todo) => todo.isCompleted).length;
-    const nextState = { total: todoList.length, done };
-    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/main.ts

@@ -5,8 +5,4 @@ const initialState = getItem("todo", []);
 const initialCount = getItem("count", { total: 0, done: 0 });
 const $app = document.querySelector("#app") as HTMLElement;
 
-new App({
-  $target: $app,
-  initialState,
-  initialCount,
-});
+new App($app, initialState, initialCount);

src/types/todo.ts

@@ -0,0 +1,9 @@
+export interface TodoItem {
+  text: string;
+  isCompleted: boolean;
+}
+
+export interface TodoCount {
+  total: number;
+  done: number;
+}