Practice Exercises - Set 2 (Intermediate & Advanced)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

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

Set 1 ထက် ခက်ခဲပြီး, tutorial ရဲ့ Intermediate နှင့် Advanced chapter များမှ union types, type narrowing, generics, classes ဆိုင်ရာ concept များကို ပေါင်းစပ်ပြီး လက်တွေ့ ပြဿနာများ ဖြေရှင်းကြည့်ရမှာ ဖြစ်ပါတယ်။ Task တစ်ခုစီမှာ concept တစ်ခုတည်းမက, ယခင် concept များနှင့်ပါ ပေါင်းစပ်ရသောကြောင့် code ကို ရေးမလုပ်ခင် စက္ကန့်အနည်းငယ် စဉ်းစားပြီးမှ ရေးကြည့်ပါ။ Compiler error တက်လာလျှင် panic မဖြစ်ပါနှင့် - error message ကို ဖတ်ပြီး type mismatch ဘယ်နေရာမှာလဲဆိုတာ debug လုပ်ကြည့်ခြင်းကလည်း TypeScript learning ရဲ့ အရေးကြီးသော အစိတ်အပိုင်း ဖြစ်ပါတယ်။

လေ့ကျင့်ခန်းများ

Task 1: Shape ဆိုတဲ့ type ကို { kind: "circle"; radius: number } | { kind: "square"; side: number } ဟု union အနေဖြင့် သတ်မှတ်ပြီး, getArea(shape: Shape): number function ကို kind ဖြင့် type narrowing လုပ်၍ area တွက်ချက်ပါ။ Task 2: Stack<T> ဆိုတဲ့ generic class တစ်ခု ဖန်တီးပြီး push(item: T): void, pop(): T | undefined, peek(): T | undefined method များ implement လုပ်ပါ။ Task 3: Animal ဆိုတဲ့ base class တစ်ခု ဖန်တီးပြီး, Dog class ကို Animal ကနေ extend လုပ်ကာ makeSound(): string method ကို override လုပ်ပါ (Dog ၏ makeSound() က "Woof" ပြန်ရမည်)။ Task 4: isString(value: unknown): value is string ဆိုတဲ့ type guard function တစ်ခု ရေးပြီး, unknown[] array တစ်ခုမှ string value များကိုသာ filter လုပ်ရန် အသုံးပြုကြည့်ပါ။

getArea() function က Shape union type ကို kind property ဖြင့် narrowing လုပ်ပြီး area မှန်ကန်စွာ တွက်နိုင်ပြီလား
Stack<T> generic class က push/pop/peek method သုံးခုစလုံးကို LIFO order ဖြင့် အလုပ်လုပ်စေပြီလား
Dog class က Animal class ကို extend လုပ်ပြီး makeSound() ကို override လုပ်နိုင်ပြီလား

Code နမူနာ

typescript

// Task 1
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function getArea(shape: Shape): number {
  // TODO: narrow by shape.kind
  return 0;
}

// Task 2
class Stack<T> {
  private items: T[] = [];
  push(item: T): void {
    // TODO
  }
  pop(): T | undefined {
    // TODO
    return undefined;
  }
  peek(): T | undefined {
    // TODO
    return undefined;
  }
}

// Task 3
class Animal {
  makeSound(): string {
    return "...";
  }
}

class Dog extends Animal {
  // TODO: override makeSound()
}

// Task 4
function isString(value: unknown): value is string {
  // TODO
  return false;
}

const mixed: unknown[] = [1, "two", 3, "four"];
const strings = mixed.filter(isString);
console.log(strings);

You should see

getArea() က shape အလိုက် area မှန်ကန်စွာ ပြန်ပေးပြီး, Dog ၏ makeSound() က "Woof" ပြန်ပေးကာ, strings array တွင် "two" နှင့် "four" ပါဝင်ပါလိမ့်မည်။

၅ မိနစ် စမ်းကြည့်

Task 2 ၏ Stack<T> class ကို base class အနေဖြင့် အသုံးပြုပြီး, isEmpty(): boolean method တစ်ခု ထပ်ထည့်ကာ items array ၏ length ကို စစ်ဆေးအောင် ရေးကြည့်ပါ (5 minutes)။

သတိလေးတစ်ချက်

Type guard function (value is string) ရေးသားရာတွင် return type annotation ကို boolean အနေနဲ့ ချန်မထားပါနှင့် - "value is Type" predicate ကို precisely ရေးမှသာ TypeScript က narrowing ကို မှန်ကန်စွာ apply လုပ်ပေးပါမည်။