Mini Project: Task Manager - Part 2 (Class & Filtering)

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Part 1 မှာ global variable နဲ့ function တွေအဖြစ် ရေးထားတဲ့ code ကို ဒီအပိုင်းမှာ class တစ်ခုအောက် ပြန်လည် organize လုပ်ပါမယ်။ Classes ကို အသုံးပြုခြင်းက state (tasks array) နဲ့ behavior (addTask, listTasks) တွေကို တစ်နေရာတည်း စုစည်းပေးပြီး၊ private field များဖြင့် data ကို encapsulate လုပ်နိုင်ပါတယ်။ ထို့အပြင် union types နဲ့ type narrowing ကို အသုံးပြုပြီး status အလိုက် task များကို filter လုပ်တဲ့ method တစ်ခု ထည့်ပါမယ်။ ဒီအဆင့်ကနေတဆင့် real-world application တွေမှာ class-based structure ဘယ်လို အသုံးဝင်လဲဆိုတာ သိသာစွာ မြင်ရပါလိမ့်မယ်။

လက်တွေ့ ဆောက်ကြည့်မယ်

TaskManager class တစ်ခု ဖန်တီးပြီး private tasks: Task[] = [] နှင့် private nextId: number = 1 ဆိုတဲ့ field များ ထည့်ပါ။ Class ထဲမှာ addTask(), listTasks() method များကို Part 1 ကနေ ပြောင်းရေးပါ။ updateStatus(id: number, status: TaskStatus): boolean ဆိုတဲ့ method တစ်ခု ထပ်ထည့်ပြီး၊ tasks array ထဲက id တူတဲ့ task ကို ရှာပြီး status ကို update လုပ်ပါ (မတွေ့ရင် false ပြန်ပါ)။ filterByStatus(status: TaskStatus): Task[] ဆိုတဲ့ method ကိုလည်း ထည့်ပြီး status နှင့် ကိုက်ညီတဲ့ task များကိုသာ array အသစ်အဖြစ် ပြန်ပါ (Array.filter() သုံးပါ)။ နောက်ဆုံးမှာ TaskManager instance တစ်ခု ဖန်တီးပြီး task များ ထည့်၊ status update လုပ်၊ filter လုပ်ပြီး result ကို console.log ဖြင့် စမ်းသပ်ပါ။

• TaskManager class ထဲတွင် tasks state ကို private field အဖြစ် encapsulate လုပ်ပြီးပြီလား
• updateStatus() method က id ဖြင့် task ကို ရှာပြီး status update လုပ်နိုင်ပြီလား
• filterByStatus() method က status အလိုက် task များကို မှန်ကန်စွာ filter လုပ်ပြသနိုင်ပြီလား

Code နမူနာ

class TaskManager {
  private tasks: Task[] = [];
  private nextId: number = 1;

  addTask(title: string, priority: Task["priority"]): Task {
    const task: Task = {
      id: this.nextId++,
      title,
      status: TaskStatus.Todo,
      priority,
    };
    this.tasks.push(task);
    return task;
  }

  listTasks(): void {
    this.tasks.forEach((t) =>
      console.log(`#${t.id} [${t.status}] ${t.title} (${t.priority})`)
    );
  }

  updateStatus(id: number, status: TaskStatus): boolean {
    const task = this.tasks.find((t) => t.id === id);
    if (!task) return false;
    task.status = status;
    return true;
  }

  filterByStatus(status: TaskStatus): Task[] {
    return this.tasks.filter((t) => t.status === status);
  }
}

const manager = new TaskManager();
manager.addTask("Learn generics", "high");
manager.addTask("Deploy project", "medium");
manager.updateStatus(1, TaskStatus.InProgress);

console.log("In Progress tasks:");
manager.filterByStatus(TaskStatus.InProgress).forEach((t) =>
  console.log(`- ${t.title}`)
);

"In Progress tasks:" ဆိုတဲ့ heading အောက်တွင် status update လုပ်ထားသော task title ("Learn generics") ကိုသာ ပြသပေးမည်။