refactor: todo list 배열 타입 추가

Author: bgyoons

src/App.ts

@@ -3,15 +3,15 @@ import TodoForm from "./components/TodoForm.js";
 import TodoList from "./components/TodoList.js";
 import TodoCount from "./components/TodoCount.js";
 import { setItem } from "./utils/storage.js";
-import { TodoCount as TodoCnt, TodoItem } from "./types/todo.js";
+import { TodoCount as TodoCnt, TodoList as TodoLi } from "./types/todo.js";
 
 export default class App {
   private readonly todoList: TodoList;
   private readonly todoCount: TodoCount;
 
   constructor(
     private readonly $target: HTMLElement,
-    private readonly initialState: TodoItem[],
+    private readonly initialState: TodoLi,
     private readonly initialCount: TodoCnt
   ) {
     new Header($target, "Todo List");
@@ -28,16 +28,16 @@ export default class App {
     );
 
     this.todoList = new TodoList(
-      (state: TodoItem[]) => this.#updateCount(state)
       $target,
       initialState,
+      (state: TodoLi) => this.#updateCount(state)
     );
 
     this.todoCount = new TodoCount($target, initialCount);
   }
 
   // 카운트 업데이트
-  #updateCount(todoList: TodoItem[]) {
+  #updateCount(todoList: TodoLi) {
     const done = todoList.filter((todo) => todo.isCompleted).length;
     const nextState = { total: todoList.length, done };
     this.todoCount.setState(nextState);

src/components/TodoList.ts

@@ -1,15 +1,15 @@
 import { setItem } from "../utils/storage.js";
 import validation from "../utils/validation.js";
-import { TodoItem } from "../types/todo.js";
+import { TodoList as TodoLi } from "../types/todo.js";
 
 export default class TodoList {
-  state: TodoItem[];
+  state: TodoLi;
   private readonly $todoList = document.createElement("div");
 
   constructor(
     private readonly $target: HTMLElement,
-    private readonly initialState: TodoItem[],
-    private readonly updateCount: (state: TodoItem[]) => void
+    private readonly initialState: TodoLi,
+    private readonly updateCount: (state: TodoLi) => void
   ) {
     $target.appendChild(this.$todoList);
 
@@ -44,7 +44,7 @@ export default class TodoList {
     });
   }
 
-  setState(nextState: TodoItem[]) {
+  setState(nextState: TodoLi) {
     const newState = validation.state(nextState);
     this.state = newState;
     setItem("todo", JSON.stringify(newState));

src/types/todo.ts

@@ -1,11 +1,13 @@
-export interface TodoItem {
 export type StorageKey = "todo" | "count";
 
+export type TodoList = TodoItem[];
+
+interface TodoItem {
   text: string;
   isCompleted: boolean;
 }
 
 export interface TodoCount {
   total: number;
   done: number;
-}
+}

src/utils/validation.ts

@@ -1,7 +1,7 @@
-import { TodoItem } from "../types/todo.js";
+import { TodoList } from "../types/todo.js";
 
 const validation = {
-  state(todoList: TodoItem[]) {
+  state(todoList: TodoList) {
     return todoList.filter(
       (todo) =>
         typeof todo?.text === "string" && typeof todo?.isCompleted === "boolean"