Satisfies Keyword

💡 ရည်ရွယ်ချက်

satisfies ဆိုတာက TypeScript မှာ ဘယ်လို ပြဿနာမျိုးကို ဖြေရှင်းပေးဖို့ ပေါ်လာတာလဲဆိုတာ ရိုးရှင်းစွာ နားလည်ဖို့၊ သူ့ရဲ့ အသုံးပြုပုံကို သိရှိဖို့နဲ့ ပိုပြီး တိကျသေချာတဲ့ (Type-safe) Code တွေ ရေးတတ်လာစေဖို့ ဖြစ်ပါတယ်။

Type သတ်မှတ်ရာမှာ အသေးစိတ် အချက်အလက်တွေ ပျောက်ဆုံးသွားခြင်း

💡 ကြိုတင် သိထားရမည့် အချက်

Type Annotation (:) ကို အသုံးပြုပြီး Object တွေရဲ့ Type ကို သတ်မှတ်လိုက်တဲ့အခါ၊ အဲ့ဒီ Object ရဲ့ အတွင်းပိုင်းက အသေးစိတ် အချက်အလက်လေးတွေ (ဥပမာ - တိကျတဲ့ Key နာမည်တွေ) ဘာလို့ ပျောက်သွားတတ်သလဲ၊ ပြီးတော့ အဲ့ဒီ အချက်အလက်တွေကို ပြန်ခေါ်သုံးဖို့ ဘာလို့ ခက်ခဲသွားသလဲ ဆိုတာကို အရင်ဆုံး နားလည်ထားဖို့ လိုအပ်ပါတယ်။

Typed object တစ်ခု သတ်မှတ်ခြင်း

ကျွန်တော်တို့ Application တွေ ရေးတဲ့အခါ Objects တွေကို အများကြီး ဖန်တီး အသုံးပြုရလေ့ ရှိပါတယ်။ အဲ့ဒီ Objects တွေဟာ ကျွန်တော်တို့ ကြိုတင် သတ်မှတ်ထားတဲ့ ပုံစံ (General Structure) နဲ့ ကိုက်ညီမှု ရှိဖို့ အရေးကြီးပါတယ်။ ဥပမာအားဖြင့် Application ရဲ့ ဆက်တင်တွေ (Settings) သိမ်းထားမယ့် Configuration Object မျိုးပေါ့။

config.ts

// ဒါက AppConfig ဆိုတဲ့ Interface တစ်ခုပါ။
// အက်ပလီကေးရှင်းရဲ့ Configuration Object တွေမှာ ဘာတွေ ပါရမယ်ဆိုတာ သတ်မှတ်ပေးထားတာပါ။
interface AppConfig {
  env: "development" | "production" | "test"; // env က ဒီ String ၃ ခုထဲက တစ်ခုခု အတိအကျ ဖြစ်ရမယ်။
  port: number; // port က number အမျိုးအစား ဖြစ်ရမယ်။
  featureFlags: Record<string, boolean>; // featureFlags က Key က string၊ Value က boolean ဖြစ်တဲ့ Object ဖြစ်ရမယ်။
}

အခု အဲ့ဒီ AppConfig Interface ရဲ့ စည်းမျဉ်းတွေနဲ့ ကိုက်ညီတဲ့ တကယ့် Configuration Object အစစ်တစ်ခုကို ဖန်တီးကြည့်ရအောင်။

config.ts

const myAppConfig = {
  env: "development", // အတိအကျ သတ်မှတ်ထားတဲ့ "development"
  port: 3000,
  featureFlags: {
    darkMode: true,   // Key အတိအကျ: "darkMode"
    newOnboarding: false // Key အတိအကျ: "newOnboarding"
  }
};

// ဒီအချိန်မှာ TypeScript က myAppConfig ရဲ့ Type ကို အတတ်နိုင်ဆုံး အတိကျဆုံး (Most specific) အနေနဲ့ အလိုအလျောက် မှန်းဆ (Infer) ပေးထားပါတယ်:
// typeof myAppConfig ရဲ့ ပုံစံက အောက်ပါအတိုင်း ဖြစ်နေပါမယ်:
// {
//   env: "development"; // "development" ဆိုတဲ့ String အတိအကျ
//   port: number;
//   featureFlags: {
//     darkMode: boolean; // darkMode ဆိုတဲ့ Key ပါကြောင်း အတိအကျ သိတယ်။
//     newOnboarding: boolean; // newOnboarding ဆိုတဲ့ Key ပါကြောင်း အတိအကျ သိတယ်။
//   };
// }

💡 ရှင်းပြချက်

ဒီနေရာမှာ myAppConfig ဆိုတဲ့ Object ကို Type ဘာမှ သွားမကပ်ထားသေးပါဘူး။ အဲ့ဒီအခါ TypeScript က ဒီ Object ကို ဖတ်ကြည့်ပြီး env က "development" ဆိုတာရယ်၊ featureFlags ထဲမှာဆိုရင်လည်း darkMode တို့ newOnboarding တို့ ပါဝင်တယ် ဆိုတာကိုပါ သူက အလိုအလျောက် အတိအကျ မှတ်သားထားပေးပါတယ်။

Video Lesson