Merge remote-tracking branch 'todo-list/main' into yoonseo_working

Author: bgyoons

src/components/TodoForm.ts

@@ -20,7 +20,8 @@ export default class TodoForm {
     if (!this.isInit) {
       this.$form.addEventListener("submit", (e) => {
         e.preventDefault();
-        const $todo = this.$form.querySelector("input[name=todo]") as HTMLInputElement;
+        const $todo = this.$form.querySelector<HTMLInputElement>("input[name=todo]");
+        if (!$todo) return;
         const text = $todo.value;
         if (text.length > 1) {
           $todo.value = "";

src/components/TodoList.ts

@@ -3,7 +3,7 @@ import validation from "../utils/validation.js";
 import { TodoItem } from "../types/todo.js";
 
 export default class TodoList {
-  state: TodoItem[] = [];
+  state: TodoItem[];
   private readonly $todoList = document.createElement("div");
 
   constructor(
@@ -24,7 +24,8 @@ export default class TodoList {
 
       if ($li) {
         const newState = [...this.state];
-        const index = +($li.dataset.index as string);
+        if (typeof $li.dataset.index !== "string") return;
+        const index = +$li.dataset.index;
 
         if (target.className === "deleteBtn") {
           newState.splice(index, 1);

src/main.ts

@@ -3,6 +3,6 @@ import { getItem } from "./utils/storage.js";
 
 const initialState = getItem("todo", []);
 const initialCount = getItem("count", { total: 0, done: 0 });
-const $app = document.querySelector("#app") as HTMLElement;
+const $app = document.querySelector<HTMLElement>("#app");
 
-new App($app, initialState, initialCount);
+$app && new App($app, initialState, initialCount);