Keys, Values များနှင့် အလုပ်လုပ်ခြင်း: Record<K, T>

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

Record<K, T> Utility Type ကို အသုံးပြုပြီး Object တွေအတွက် Type တွေ လွယ်လွယ်ကူကူ သတ်မှတ်တတ်ဖို့ ဖြစ်ပါတယ်။ အဲ့ဒီ Object တွေမှာ Keys တွေရဲ့ Type က K ဖြစ်ရမှာဖြစ်ပြီး Values တွေရဲ့ Type က T ဖြစ်ရပါမယ်။

Record<K, T>: Key နဲ့ Value Types တွေပါတဲ့ Object ပုံစံများ သတ်မှတ်ခြင်း

• ဘာလုပ်ပေးသလဲ: Record<K, T> က Object Type တစ်ခုကို လွယ်လွယ်ကူကူ ဖန်တီးပေးပါတယ်။ အဲ့ဒီ Object ရဲ့ Property Keys တွေဟာ K Type ဖြစ်ရမယ်လို့ သတ်မှတ်ပေးပြီး၊ Property Values တွေကတော့ T Type ဖြစ်ရပါမယ်လို့ သတ်မှတ်ပေးပါတယ်။
  • K (Key) နေရာမှာ အများအားဖြင့် string, number, symbol တွေ ဒါမှမဟုတ် သီးခြား သတ်မှတ်ထားတဲ့ String / Number နာမည်လေးတွေရဲ့ ပေါင်းစပ်မှု (Union) တွေကို ထည့်သုံးလေ့ ရှိပါတယ်။
  • T (Value) နေရာမှာကတော့ အဲ့ဒီ Keys တွေနဲ့ တွဲဖက် အသုံးပြုမယ့် တန်ဖိုးတွေရဲ့ Type (ဥပမာ - boolean, UserProfile စသဖြင့်) ကို ထည့်ပေးရပါတယ်။
• ဘယ်လို သုံးမလဲ:
  1. Feature Flags (အဖွင့်/အပိတ် ခလုတ်များ):
     • Feature Flags တွေဆိုတာ Application ရဲ့ လုပ်ဆောင်ချက် အချို့ကို အလွယ်တကူ ဖွင့်/ပိတ် (Toggle) လုပ်နိုင်အောင် ထိန်းချုပ်ဖို့ သုံးတဲ့ Objects တွေပါပဲ။ Key အနေနဲ့ Feature နာမည်ကို သုံးပြီး၊ Value အနေနဲ့ true (ဖွင့်) သို့မဟုတ် false (ပိတ်) ကို သုံးပါမယ်။

index.ts

// FeatureFlags ဆိုတဲ့ Type အသစ် ဖန်တီးမယ်။ Key တွေက ပြထားတဲ့ string နာမည်တွေထဲက ဖြစ်ရမယ်၊ Value တွေက boolean ဖြစ်ရမယ်။
type FeatureFlags = Record<"newUserProfilePage" | "darkMode" | "betaFeatureX", boolean>;

const currentFlags: FeatureFlags = {
  newUserProfilePage: true,
  darkMode: false,
  betaFeatureX: true,
  // anotherFlag: true; // Error ပြပါလိမ့်မယ်။ 'anotherFlag' ဆိုတာ FeatureFlags ရဲ့ Key တွေထဲမှာ မပါဝင်လို့ပါ။
};

2. Simple Dictionary / Cache (ရိုးရှင်းသော အဘိဓာန် / မှတ်ဉာဏ်):
   • Data တွေကို Key-Value ပုံစံနဲ့ သိမ်းဆည်းထားတဲ့ Dictionary ဒါမှမဟုတ် Cache မျိုးတွေ တည်ဆောက်တဲ့အခါ အရမ်း အသုံးဝင်ပါတယ်။ ဥပမာ - User ID (string) ကို Key အဖြစ် သုံးပြီး၊ User Profile Object အပြည့်အစုံကို Value အဖြစ် သိမ်းတာမျိုးပေါ့။

index.ts

// UserCache ဆိုတဲ့ Type အသစ် ဖန်တီးမယ်။ Key တွေက မည်သည့် string (ဥပမာ user ID) မဆို ဖြစ်နိုင်တယ်။ Value တွေကတော့ UserProfile ဖြစ်ရမယ်။
type UserCache = Record<string, UserProfile>;

const cache: UserCache = {
  "user-123": { id: 123, username: "cachedUser", bio: null, isActive: true, lastLogin: new Date() },
  "user-456": { id: 456, username: "anotherCached", email: "c@ex.com", bio: "Bio here", isActive: false, lastLogin: new Date() }
};

3. CSS-in-JS Style Objects (JavaScript ထဲက CSS ပုံစံများ):
   • React လို Framework တွေမှာ JavaScript ထဲကနေ CSS (Cascading Style Sheets) ပုံစံတွေ သတ်မှတ်တဲ့ Objects တွေ ဖန်တီးတဲ့အခါ သုံးနိုင်ပါတယ်။ Key က CSS Property နာမည် (string) ဖြစ်ပြီး၊ Value က CSS တန်ဖိုး (string ဒါမှမဟုတ် number) ဖြစ်ပါမယ်။

index.ts

// CSSProperties ဆိုတဲ့ Type အသစ် ဖန်တီးမယ်။ Key တွေက string ဖြစ်ပြီး၊ Value တွေက string ဒါမှမဟုတ် number နှစ်ခုထဲက တစ်ခုခု ဖြစ်ရမယ်။
type CSSProperties = Record<string, string | number>;

const styles: CSSProperties = {
  padding: "10px", // Key က string၊ Value က string
  marginTop: 20, // Key က string၊ Value က number
  color: "blue", // Key က string၊ Value က string
  // borderRadius: true // Error ပြပါလိမ့်မယ်။ Value က boolean ဖြစ်နေလို့ပါ။ string ဒါမှမဟုတ် number ပဲ လက်ခံပါတယ်။
};

Video Lesson