satisfies ကို လက်တွေ့ အသုံးပြုနိုင်သော နေရာများ

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

satisfies Operator ကို လက်တွေ့ လုပ်ငန်းခွင်က ဘယ်လို နေရာတွေမှာ အသုံးဝင်သလဲ၊ ပြီးတော့ သူ့ကို အကောင်းဆုံး ဘယ်လို အသုံးချလို့ ရသလဲ ဆိုတာကို လေ့လာကြည့်ရအောင်။

Configuration Objects

Configuration ဆိုတာ Application တစ်ခုလုံးရဲ့ Settings တွေကို စုစည်းထားတဲ့ Object တွေပါ။ ဥပမာ - Website ရဲ့ Theme (အရောင်) တွေ၊ Fonts တွေ၊ အကွာအဝေး (Padding) တွေ စသဖြင့်ပေါ့။ ဒီလို ရှုပ်ထွေးတဲ့ Settings တွေကို စီမံခန့်ခွဲတဲ့အခါ satisfies က အရမ်း အသုံးဝင်ပါတယ်။ သူက Object ရဲ့ ပုံစံ မှန်ကန်အောင် ထိန်းချုပ်ပေးရုံသာမကဘဲ၊ Setting တစ်ခုချင်းစီရဲ့ အသေးစိတ် အချက်အလက် (Specificity) တွေကိုပါ မပျောက်ပျက်စေဘဲ လုံလုံခြုံခြုံ ပြန်လည် ထုတ်ယူ သုံးစွဲလို့ရအောင် ကူညီပေးပါတယ်။

config.ts

type ThemeColors = "light" | "dark";

type ComponentSettings = {
  padding: number;
  font: string;
  features?: Record<string, boolean>;
};

interface AppTheme {
  activeTheme: ThemeColors;
  componentDefaults: Record<string, ComponentSettings>;
}

const myAppTheme = {
  activeTheme: "dark", // ဒီနေရာမှာ "dark" လို့ အတိအကျ သိနေပါတယ်။
  componentDefaults: {
    button: { padding: 10, font: "Arial", features: { roundedCorners: true } },
    card: { padding: 15, font: "Georgia" }
    // modal: { paddng: 5, font: "Verdana" } // ERROR: 'paddng' ဆိုပြီး စာလုံးပေါင်း မှားနေတာပါ။ `satisfies AppTheme` က ဒါကို ချက်ချင်း ဖမ်းမိမှာပါ။
  }
} satisfies AppTheme;

satisfies ရဲ့ အကျိုးကျေးဇူးများ

၁။ စစ်ဆေးပေးခြင်း (Validation): myAppTheme Object ဟာ AppTheme ဆိုတဲ့ ကြိုတင် သတ်မှတ်ထားတဲ့ ပုံစံ (Interface) နဲ့ ကိုက်ညီရဲ့လား ဆိုတာကို satisfies က အသေအချာ စစ်ဆေးပေးပါတယ်။

• activeTheme နေရာမှာ "blue" လို့ ထည့်မိရင် Error တက်ပါမယ်။
• button.padding နေရာမှာ Number မဟုတ်ဘဲ String ("10px") သွားထည့်မိရင်လည်း Error တက်ပါမယ်။
• button.extraProp ဆိုပြီး မလိုအပ်တဲ့ Property အသစ် ထပ်ထည့်မိရင်လည်း Error တက်ပါမယ်။

၂။ အသေးစိတ် အချက်အလက် မပျောက်ဆုံးခြင်း (Specificity Preserved):

config.ts

// Type က "dark" လို့ အတိအကျ သိတယ်။ ThemeColors ထဲက (light ဒါမှမဟုတ် dark) တစ်ခုခုလို့ ယေဘုယျ မမှတ်ယူတော့ပါဘူး။
const currentThemeMode = myAppTheme.activeTheme;

// Type က number လို့ အတိအကျ သိပါတယ်။
const buttonPadding = myAppTheme.componentDefaults.button.padding;

// Type က boolean (true/false) ဒါမှမဟုတ် undefined (features က optional ဖြစ်နေလို့) လို့ အတိအကျ သိပါတယ်။
const buttonHasRoundedCorners = myAppTheme.componentDefaults.button.features?.roundedCorners;

Keys တွေ အတိအကျ သိထားတဲ့ Objects တွေ (ဒါမှမဟုတ် Dictionaries တွေ) ကို အသုံးပြုခြင်း

Objects တွေကို Key-Value Pairs တွေ စုစည်းထားတဲ့ Dictionary လိုမျိုး အသုံးပြုရတဲ့ အခါမျိုးမှာလည်း satisfies က အရမ်း အသုံးဝင်ပါတယ်။ သတ်မှတ်ထားတဲ့ Keys တွေ အကုန်လုံး ပါဝင်ရဲ့လား၊ Values တွေရဲ့ Type ကကော မှန်ကန်ရဲ့လား ဆိုတာ သေချာအောင် လုပ်ပေးနိုင်ပါတယ်။ ဒီလို သုံးတဲ့အတွက် Object တစ်ခုလုံးကို ပြည့်စုံစွာ စစ်ဆေးနိုင်သလို၊ လိုအပ်တဲ့ Property တွေကိုလည်း အတိအကျ ခေါ်သုံးလို့ ရသွားပါတယ်။

permission.ts

type Permissions = "read" | "write" | "delete";
type UserRolePermissions = Record<Permissions, boolean>;

const adminPermissions = {
  read: true,
  write: true,
  delete: true,
  // moderate: true // ဒီနေရာမှာ Permissions ထဲမှာ မပါဝင်တဲ့ 'moderate' ဆိုတဲ့ Key မျိုး ထည့်မိရင် Error ချက်ချင်း တက်ပါမယ်။
} satisfies UserRolePermissions;

const guestPermissions = {
  read: true,
  write: false,
  // delete property မပါဘူး!
} // satisfies UserRolePermissions;
// 👆 ဒီနေရာမှာ `satisfies UserRolePermissions` လို့ ထည့်လိုက်တာနဲ့ 'delete' မပါဝင်လို့ Error ပြပါလိမ့်မယ်။

// adminPermissions.read ရဲ့ Type က ယေဘုယျ `boolean` မဟုတ်တော့ဘဲ၊ `true` လို့ အတိအကျ သိနေပါတယ်။

Array / Tuple တစ်ခုမှာ ခွင့်ပြုထားတဲ့ Types တွေပဲ ပါဝင်ကြောင်း သေချာစေခြင်း

အရောင်တွေကို အစဉ်လိုက် စီစဉ်ထားတဲ့ Palettes တွေ၊ သို့မဟုတ် အဆင့်ဆင့် အလုပ်လုပ်ရမယ့် ခိုင်းစေချက် (Commands) စာရင်းတွေ လိုမျိုး Array တွေ တည်ဆောက်တဲ့ နေရာတွေမှာလည်း satisfies ကို ထိရောက်စွာ အသုံးပြုနိုင်ပါတယ်။

palette.ts

type Color = "red" | "green" | "blue" | {custom: string};

// Array အတွက် satisfies အသုံးပြုခြင်း
const primaryPalette = [
  "red",
  "green",
  {custom: "#FFA500"} // လိမ္မော်ရောင်
] satisfies Color[];

// primaryPalette[0] ရဲ့ Type က "red" လို့ အတိအကျ သိတယ်။
// primaryPalette[2].custom ရဲ့ Type က string လို့ အတိအကျ သိတယ်။

// const invalidPalette = [
//   "red", "yellow" // "yellow" ဆိုတာ Color Type ထဲမှာ မပါဝင်တဲ့အတွက် Error တက်ပါမယ်။
// ] satisfies Color[]; // ERROR!

type Command =
  | { command: "navigate", path: string }
  | { command: "wait", duration: number }
  | { command: "log", message: string };

const userJourney = [
  { command: "navigate", path: "/home" },
  { command: "wait", duration: 500 },
  { command: "log", message: "User waited" },
  // { command: "click", element: "button" } // ဒါက မှန်ကန်တဲ့ Command ပုံစံ မဟုတ်လို့ Error တက်ပါမယ်။
] satisfies Command[];

// command Type ရဲ့ အတိအကျ အချက်အလက်ကို ကြည့်ပြီး Properties တွေကို လွယ်လွယ်ကူကူ Type-safe ဖြစ်ဖြစ် ခေါ်သုံးလို့ ရပါတယ်။
userJourney.forEach(step => {
  if (step.command === "navigate") {
    console.log(step.path); // step.path ရဲ့ Type က string လို့ အတိအကျ သိပါတယ်။
  }
});