Convert task list apps to TypeScript

task-1/src/main.js → task-1/src/main.ts

@@ -1,33 +1,34 @@
 import { TaskManager } from "./task-manager.js";
 import { TaskStore } from "./store.js";
 import { AppView } from "./views/app-view.js";
+import { FilterStatus, TaskHandlers } from "./types.js";
 
 const taskManager = new TaskManager(new TaskStore());
-let currentFilter = "all";
-let appView;
+let currentFilter: FilterStatus = "all";
+let appView: AppView;
 
-function render() {
+function render(): void {
   appView.render(taskManager.getFiltered(currentFilter), currentFilter);
 }
 
-const handlers = {
-  onAdd(title, description) {
+const handlers: TaskHandlers = {
+  onAdd(title: string, description: string): void {
     taskManager.addTask(title, description);
     render();
   },
-  onToggle(id) {
+  onToggle(id: string): void {
     taskManager.toggleTask(id);
     render();
   },
-  onDelete(id) {
+  onDelete(id: string): void {
     taskManager.deleteTask(id);
     render();
   },
-  onEdit(id, title, description) {
+  onEdit(id: string, title: string, description: string): void {
     taskManager.editTask(id, title, description);
     render();
   },
-  onFilter(status) {
+  onFilter(status: FilterStatus): void {
     currentFilter = status;
     render();
   },

task-1/src/store.js → task-1/src/store.ts

@@ -1,7 +1,9 @@
+import { Task } from './types.js';
+
 export class TaskStore {
   STORAGE_KEY = "todo-tasks";
 
-  load() {
+  load(): Task[] {
     try {
       const raw = localStorage.getItem(this.STORAGE_KEY);
       if (!raw) return [];
@@ -11,7 +13,7 @@ export class TaskStore {
     }
   }
 
-  save(tasks) {
+  save(tasks: Task[]): void {
     localStorage.setItem(this.STORAGE_KEY, JSON.stringify(tasks));
   }
-}
+}

task-1/src/task-manager.js → task-1/src/task-manager.ts

@@ -1,17 +1,21 @@
+import { Task, FilterStatus } from './types.js';
+import { TaskStore } from './store.js';
+
 export class TaskManager {
-  tasks = [];
+  tasks: Task[] = [];
+  store: TaskStore;
 
-  constructor(store) {
+  constructor(store: TaskStore) {
     this.store = store;
     this.tasks = store.load();
   }
 
-  save() {
+  save(): void {
     this.store.save(this.tasks);
   }
 
-  addTask(title, description) {
-    const newTask = {
+  addTask(title: string, description: string): void {
+    const newTask: Task = {
       id: crypto.randomUUID(),
       title,
       description,
@@ -21,26 +25,26 @@ export class TaskManager {
     this.save();
   }
 
-  deleteTask(id) {
+  deleteTask(id: string): void {
     this.tasks = this.tasks.filter((task) => task.id !== id);
     this.save();
   }
 
-  toggleTask(id) {
+  toggleTask(id: string): void {
     this.tasks = this.tasks.map((task) =>
       task.id === id ? { ...task, completed: !task.completed } : task,
     );
     this.save();
   }
 
-  editTask(id, title, description) {
+  editTask(id: string, title: string, description: string): void {
     this.tasks = this.tasks.map((task) =>
       task.id === id ? { ...task, title, description } : task,
     );
     this.save();
   }
 
-  getFiltered(status) {
+  getFiltered(status: FilterStatus): Task[] {
     switch (status) {
       case "all":
         return this.tasks;
@@ -50,4 +54,4 @@ export class TaskManager {
         return this.tasks.filter((task) => !task.completed);
     }
   }
-}
+}

task-1/src/types.ts

@@ -0,0 +1,17 @@
+
+export interface Task {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+}
+
+export type FilterStatus = 'all' | 'completed' | 'pending';
+
+export interface TaskHandlers {
+  onAdd(title: string, description: string): void;
+  onToggle(id: string): void;
+  onDelete(id: string): void;
+  onEdit(id: string, title: string, description: string): void;
+  onFilter(status: FilterStatus): void;
+}

task-1/src/views/app-view.js → task-1/src/views/app-view.ts

@@ -1,7 +1,11 @@
 import { TaskListView } from "./task-list-view.js";
+import { Task, TaskHandlers, FilterStatus } from "../types.js";
 
 export class AppView {
-  constructor(root, handlers) {
+  filterBar: HTMLDivElement;
+  taskListView: TaskListView;
+
+  constructor(root: HTMLElement, handlers: TaskHandlers) {
     root.innerHTML = String.raw`
       <h1>To-Do List</h1>
       <form class="todo-form">
@@ -17,12 +21,11 @@ export class AppView {
       <ul class="task-list"></ul>
     `;
 
-    const form = root.querySelector(".todo-form");
-    const titleInput = root.querySelector("#title-input");
-    const descInput = root.querySelector("#desc-input");
-    const taskListEl = root.querySelector(".task-list");
-    this.filterBar = root.querySelector(".filter-bar");
-
+    const form = root.querySelector<HTMLFormElement>(".todo-form")!;
+    const titleInput = root.querySelector<HTMLInputElement>("#title-input")!;
+    const descInput = root.querySelector<HTMLInputElement>("#desc-input")!;
+    const taskListEl = root.querySelector<HTMLUListElement>(".task-list")!;
+    this.filterBar = root.querySelector<HTMLDivElement>(".filter-bar")!;
     this.taskListView = new TaskListView(taskListEl, handlers);
 
     form.addEventListener("submit", (e) => {
@@ -33,20 +36,20 @@ export class AppView {
       form.reset();
     });
 
-    for (const btn of root.querySelectorAll(".filter-bar button")) {
+    for (const btn of root.querySelectorAll<HTMLButtonElement>(".filter-bar button")) {
       btn.addEventListener("click", () => {
-        handlers.onFilter(btn.dataset.filter);
+        handlers.onFilter(btn.dataset.filter as FilterStatus);
       });
     }
   }
 
-  render(tasks, activeFilter) {
+  render(tasks: Task[], activeFilter: FilterStatus): void {
     this.taskListView.render(tasks);
     this.updateFilterButtons(activeFilter);
   }
 
-  updateFilterButtons(activeFilter) {
-    const buttons = this.filterBar.querySelectorAll("[data-filter]");
+  updateFilterButtons(activeFilter: FilterStatus): void {
+    const buttons = this.filterBar.querySelectorAll<HTMLButtonElement>("[data-filter]");
     for (const btn of buttons) {
       btn.classList.toggle("active", btn.dataset.filter === activeFilter);
     }

task-1/src/views/task-edit-view.js → task-1/src/views/task-edit-view.ts

@@ -1,6 +1,11 @@
 import { escapeHtml } from "./utils.js";
+import { Task, TaskHandlers, FilterStatus } from "../types.js";
 
-export function enterEditMode(li, task, handlers) {
+export function enterEditMode(
+  li: HTMLLIElement,
+  task: Task,
+  handlers: TaskHandlers
+): void {
   li.innerHTML = String.raw`
       <input type="checkbox"${task.completed ? " checked" : ""}>
       <div class="edit-form">
@@ -13,23 +18,24 @@ export function enterEditMode(li, task, handlers) {
       </div>
     `;
 
-  const checkbox = li.querySelector("input[type='checkbox']");
-  const titleInput = li.querySelector(".edit-title");
-  const descInput = li.querySelector(".edit-desc");
+  const checkbox = li.querySelector<HTMLInputElement>("input[type='checkbox']")!;
+  const titleInput = li.querySelector<HTMLInputElement>(".edit-title")!;
+  const descInput = li.querySelector<HTMLInputElement>(".edit-desc")!;
 
   checkbox.addEventListener("change", () => handlers.onToggle(task.id));
 
-  li.querySelector(".save-btn").addEventListener("click", () => {
+  li.querySelector<HTMLButtonElement>(".save-btn")!.addEventListener("click", () => {
     const newTitle = titleInput.value.trim();
     if (!newTitle) return;
     handlers.onEdit(task.id, newTitle, descInput.value.trim());
   });
 
-  li.querySelector(".cancel-btn").addEventListener("click", () => {
-    const activeFilter =
-      document.querySelector(".filter-bar .active")?.dataset.filter ?? "all";
+  li.querySelector<HTMLButtonElement>(".cancel-btn")!.addEventListener("click", () => {
+    const activeFilter = (
+      document.querySelector(".filter-bar .active")?.dataset.filter ?? "all"
+    ) as FilterStatus;
     handlers.onFilter(activeFilter);
   });
 
   titleInput.focus();
-}
+}

task-1/src/views/task-list-view.js → task-1/src/views/task-list-view.ts

@@ -1,13 +1,17 @@
 import { enterEditMode } from "./task-edit-view.js";
 import { escapeHtml } from "./utils.js";
+import { Task, TaskHandlers } from "../types.js";
 
 export class TaskListView {
-  constructor(root, handlers) {
+  root: HTMLUListElement;
+  handlers: TaskHandlers;
+
+  constructor(root: HTMLUListElement, handlers: TaskHandlers) {
     this.root = root;
     this.handlers = handlers;
   }
 
-  render(tasks) {
+  render(tasks: Task[]): void {
     if (tasks.length === 0) {
       this.root.innerHTML = `<li class="empty-state">No tasks to show.</li>`;
       return;
@@ -31,22 +35,20 @@ export class TaskListView {
       )
       .join("");
 
-    for (const li of this.root.querySelectorAll(".task-item")) {
-      const id = li.dataset.id;
-      const task = tasks.find((t) => t.id === id);
+    for (const li of this.root.querySelectorAll<HTMLLIElement>(".task-item")) {
+      const id = (li as HTMLElement).dataset.id!;
+      const task = tasks.find((t) => t.id === id)!;
 
-      li.querySelector("input[type='checkbox']").addEventListener(
-        "change",
-        () => this.handlers.onToggle(id),
-      );
+      li.querySelector<HTMLInputElement>("input[type='checkbox']")!
+        .addEventListener("change", () => this.handlers.onToggle(id));
 
-      li.querySelector(".edit-btn").addEventListener("click", () => {
-        enterEditMode(li, task, this.handlers);
-      });
+      li.querySelector<HTMLButtonElement>(".edit-btn")!
+        .addEventListener("click", () => {
+          enterEditMode(li, task, this.handlers);
+        });
 
-      li.querySelector(".delete-btn").addEventListener("click", () =>
-        this.handlers.onDelete(id),
-      );
+      li.querySelector<HTMLButtonElement>(".delete-btn")!
+        .addEventListener("click", () => this.handlers.onDelete(id));
     }
   }
 }

task-1/src/views/utils.js → task-1/src/views/utils.ts

@@ -1,4 +1,4 @@
-export function escapeHtml(str) {
+export function escapeHtml(str: string): string {
   return str
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")

task-1/tsconfig.json

@@ -8,7 +8,9 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "isolatedModules": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "noCheck": true
   },
-  "include": ["src"]
+  "include": ["src"],
+
 }

task-list-ts/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

task-list-ts/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Task List</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <div id="app">
+      <h1>My Tasks</h1>
+
+      <form id="task-form">
+        <input
+          type="text"
+          id="task-input"
+          placeholder="What needs to be done?"
+          required
+        />
+        <button type="submit">Add task</button>
+      </form>
+
+      <ul id="task-list"></ul>
+
+      <p id="empty-message">No tasks yet. Add one above!</p>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>