Mini Project: Task Manager - Part 1 (Setup & Structure)

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

ဒီ project မှာ command-line ပေါ်တွင် အလုပ်လုပ်တဲ့ simple Task Manager တစ်ခုကို TypeScript ဖြင့် တည်ဆောက်ပါမည်။ Part 1 မှာတော့ project ရဲ့ data shape ကို အရင်ဆုံး design လုပ်ဖို့ လိုအပ်ပါတယ်။ Task တစ်ခုစီမှာ id, title, status, priority စတာတွေ ပါဝင်ရမှာဖြစ်လို့ interface တစ်ခုဖြင့် သတ်မှတ်ပြီး၊ status အတွက်တော့ possible value တွေကို enum ဖြင့် ကန့်သတ်ပါမယ်။ Basic types (string, number, boolean) နဲ့ arrays, functions တွေကို ပြန်လည်အသုံးပြုပြီး foundation ကောင်းကောင်း ချမှတ်ခြင်းက နောက်ပိုင်း feature တွေ ထည့်ဖို့ အထောက်အကူဖြစ်စေပါတယ်။ Type safety ရှိတဲ့ data structure ကနေ project ကို စတင်ခြင်းက bug နည်းသော code ဖြစ်စေမှာ ဖြစ်ပါတယ်။

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

Task interface တစ်ခုကို id: number, title: string, status: TaskStatus, priority: "low" | "medium" | "high" ဆိုပြီး field များနှင့်အတူ ဖန်တီးပါ။ TaskStatus ဆိုတဲ့ enum ကို Todo, InProgress, Done ဆိုတဲ့ member သုံးခုနဲ့ ဖန်တီးပါ။ Task[] type ဖြင့် tasks: Task[] = [] array တစ်ခု ဖန်တီးပြီး၊ addTask(task: Task): void နှင့် listTasks(): void ဆိုတဲ့ function နှစ်ခုကို implement လုပ်ပါ။ listTasks() function ထဲမှာ tasks array ကို loop ပတ်ပြီး title, status, priority တွေကို console.log ဖြင့် ပုံစံကျကျ ပြသပါ။ နောက်ဆုံး sample task နှစ်ခုကို addTask() ဖြင့် ထည့်ပြီး listTasks() ခေါ်ကြည့်ပါ။

• Task interface ကို id, title, status, priority field များဖြင့် သတ်မှတ်ပြီးပြီလား
• TaskStatus enum ကို Todo, InProgress, Done value များဖြင့် ဖန်တီးပြီးပြီလား
• addTask() နှင့် listTasks() function နှစ်ခု အလုပ်လုပ်ပြီးပြီလား

Code နမူနာ

enum TaskStatus {
  Todo = "TODO",
  InProgress = "IN_PROGRESS",
  Done = "DONE",
}

interface Task {
  id: number;
  title: string;
  status: TaskStatus;
  priority: "low" | "medium" | "high";
}

let tasks: Task[] = [];
let nextId = 1;

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

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

addTask("Learn TypeScript generics", "high");
addTask("Write project README", "low");

listTasks();

Console တွင် task နှစ်ခု၏ id, status, title, priority များကို line တစ်ခုစီ ပုံစံကျကျ ပြသပေးမည်။