Type Annotation(:) နဲ့ Type Assertion (as) ရဲ့ ပြဿနာ

Type Annotation (:) ကြောင့် ဖြစ်တဲ့ ပြဿနာ: Type ကျယ်ပြန့်သွားခြင်း (The Widening Effect)

ပြီးခဲ့တဲ့ သင်ခန်းစာက myAppConfig က AppConfig ဖြစ်ကြောင်း type annotation ကို သုံးပြီး သေချာအောင် လုပ်ချင်ရင် ဘာဖြစ်မလဲ။

config.ts

const annotatedConfig: AppConfig = { // AppConfig နဲ့ Type annotation လုပ်လိုက်တယ်။
  env: "development",
  port: 3000,
  featureFlags: {
    darkMode: true,
    newOnboarding: false
  }
};

ဒီလို annotatedConfig: AppConfig လို့ ရေးလိုက်တာနဲ့ TypeScript က annotatedConfig အကြောင်း ဘာတွေသိလဲ ကြည့်ရအောင်။”

• annotatedConfig.env: သူ့ရဲ့ Type က အခု “development” | “production” | “test” ဖြစ်သွားပြီ။
  • အရေးကြီးတာက “development” လို့ အတိအကျ သိခဲ့တဲ့ အသေးစိတ် အချက်အလက်က ပျောက်သွားပြီ။ TypeScript က ‘ဒီ env က သုံးခုထဲက တစ်ခုခုပဲ ဖြစ်နိုင်တယ်။ ဘယ်ဟာလဲဆိုတာ အတိအကျ တော့ မသိတော့ဘူး’ လို့ ဖြစ်သွားတယ်။
• annotatedConfig.featureFlags: သူ့ရဲ့ Type က Record<string, boolean> ဖြစ်တယ်။
  • ဒီမှာလည်း ပြဿနာက darkMode နဲ့ newOnboarding ဆိုတဲ့ Key တွေ ပါတယ်ဆိုတာ TypeScript က မသိတော့ဘူး။ သူက ‘Key က စာသား ဖြစ်ရမယ်၊ Value က true/false ဖြစ်ရမယ်’ လို့ပဲ ယေဘုယျ သိတော့တယ်။

အဓိက ပြဿနာက (The Crux)

အကယ်၍ ကျွန်တော်တို့က annotatedConfig.featureFlags.darkMode လိုမျိုး အတိအကျ access လုပ်ဖို့ ကြိုးစားရင်

config.ts

// console.log(annotatedConfig.featureFlags.darkMode);
// ^^^^ Error ပြလိမ့်မယ်: Property 'darkMode' does not exist on type 'Record<string, boolean>'.
// TypeScript က 'featureFlags' ထဲမှာ string key မျိုးစုံက boolean ကို ပြန်ပေးနိုင်တယ်လို့ပဲ သိတယ်။
// 'darkMode' ဆိုတာ အတိအကျ ပါတယ်လို့ မသိတော့ဘူး။

ရှင်းပြချက်

AppConfig ဆိုတဲ့ Type ကို : လေးနဲ့ သတ်မှတ်လိုက်တဲ့အတွက် ကျွန်တော်တို့က ‘ဒီ Object က AppConfig ရဲ့ စည်းမျဉ်းအတိုင်းပဲ’ လို့ TypeScript ကို ပြောလိုက်တာပဲ။ TypeScript ကလည်း စည်းမျဉ်းအတိုင်း ဟုတ်မဟုတ်တော့ စစ်ပေးတယ်။ (ဥပမာ port ကို စာလုံးပေါင်းမှားရင် ဒါမှမဟုတ် စာသား ထည့်မိရင် Error ပြလိမ့်မယ်)။ ဒါပေမယ့် ဒီလို စစ်ပေးလိုက်တော့ env မှာ အတိအကျ “development” ဆိုတဲ့ အသေးစိတ်၊ ဒါမှမဟုတ် featureFlags ထဲမှာ darkMode ဆိုတဲ့ Key ပါတယ်ဆိုတဲ့ အသေးစိတ်တွေကို သူက Record<string, boolean> လိုမျိုး ယေဘုယျ Type အဖြစ် ပြောင်းလိုက်လို့ မသိတော့ဘူး။ ဒါကြောင့် အဲဒီ အသေးစိတ်တွေကို ခေါ်သုံးဖို့ ခက်သွားတာပေါ့။

တစ်စိတ်တစ်ပိုင်း ဖြေရှင်းနည်း: as const

ဒီပြဿနာကို ခဏဖြေရှင်းဖို့ as const ဆိုတာ သုံးလို့ရတယ်။

config.ts

const constConfig = {
  env: "development",
  port: 3000,
  featureFlags: { darkMode: true, newOnboarding: false }
} as const; // ဒီ Object ကို 'as const' လို့ ပြောလိုက်တယ်။

// ဒါဆိုရင် TypeScript က constConfig အကြောင်း ဒီလို အသေးစိတ် သိသွားမယ်:
// {
// readonly env: "development"; // 'development' လို့ အတိအကျ သိတယ်။ ပြီးတော့ ပြင်လို့မရဘူး (readonly)။
// readonly port: 3000; // 3000 လို့ အတိအကျ သိတယ်။ ပြီးတော့ ပြင်လို့မရဘူး။
// readonly featureFlags: {
// readonly darkMode: true; // 'darkMode' ပါတယ်လို့ အတိအကျ သိတယ်။ ပြင်လို့မရဘူး။
// readonly newOnboarding: false; // 'newOnboarding' ပါတယ်လို့ အတိအကျ သိတယ်။ ပြင်လို့မရဘူး။
// };
// }

ရှင်းပြချက်

as const က ‘ဒီ Object က အတိအကျ အဲဒီအတိုင်းပဲ ဖြစ်နေမယ်။ ဘာမှ မပြောင်းလဲဘူး’ လို့ ပြောလိုက်တာပါ။ ဒါကြောင့် as const လုပ်လိုက်ရင် TypeScript က အတိအကျ သိသွားပါတယ်။ ပြီးတော့ ဘယ်တော့မှ ပြင်လို့မရအောင် (Readonly) လုပ်ပေးတယ်။ ဒါပေမယ့် သူက constConfig ဟာ AppConfig ဆိုတဲ့ စည်းမျဉ်းနဲ့ ကိုက်ညီမှု ရှိမရှိတော့ မစစ်ပေးဘူး။ ဥပမာ env ကို တခြားစာလုံး environment လို့ ရေးမိရင်တောင် as const လို့ သုံးထားရင် TypeScript က ဘာ Error မှ ပြမှာ မဟုတ်ဘူး။