ဘာကြောင့် အဆင့်မြင့် TypeScript features တွေလိုအပ်တာလဲ?

JavaScript ရဲ့ မထင်မှတ်ထားတဲ့ ပြဿနာ

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

ကျွန်တော်တို့ Code တွေ ရေးပြီးသွားလို့ အားလုံး မှန်တယ်လို့ ထင်နေတာပဲ။ ဒါပေမဲ့ တကယ့် လက်တွေ့ Program ကို Run လိုက်တဲ့အခါကျမှ… “ဟင်၊ ဒီနေရာမှာ Data ဘာမှ မရှိပါလား?” “ဘာလို့ ဒီလိုကြီး ဖြစ်သွားရတာလဲ?” ဆိုပြီး မထင်မှတ်ထားတဲ့ Error တွေ ပေါ်လာတတ်ပါတယ်။ ဥပမာ - Data ပုံစံ မှားနေတာတို့၊ မရှိတဲ့ အချက်အလက်ကို သွားယူသုံးမိတာတို့ပေါ့။ ဒီလိုမျိုး Code Run နေရင်း (Runtime) ရုတ်တရက် ပေါ်လာတဲ့ Error တွေက တကယ်ကို ခေါင်းခဲစေပါတယ်။ အထူးသဖြင့် Project ကြီးလာပြီး Code တွေ အများကြီး ဖြစ်လာပြီဆို ပိုဆိုးတာပေါ့။

ဒီလိုမျိုး Run တဲ့ အချိန်ကျမှ Error တက်တာကို အောက်က Code လေးနဲ့ နမူနာ ကြည့်ရအောင်ပါ။

let userData = { name: "Alice" /* age မပါဘူးနော် */ };

function greetUser(user) {
  // user ထဲမှာ name ရှိတယ်လို့ ယူဆပြီး ရေးလိုက်တာ...
  console.log(`Hello, ${user.name.toUpperCase()}!`);
  // ဟာ... user က null ဖြစ်နေတဲ့အခါ၊ ဒါမှမဟုတ် name မပါလာတဲ့အခါ Error တက်ပြီ!
}

greetUser(userData);
greetUser(null); // သေချာပေါက် Crash ပါလိမ့်မယ်

အပေါ်က Code ကို Run ကြည့်ရင် -

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

ဒီ Code လေးမှာဆိုရင် userData ထဲမှာ name ပဲပါပြီး age မပါတာတို့၊ ဒါမှမဟုတ် greetUser Function ကို null ဆိုတဲ့ ဘာ Data မှ မရှိတဲ့ အရာနဲ့ ခေါ်လိုက်တာတို့ကြောင့် Program Run ရင်း Error တက် (Crash) သွားတာ ဖြစ်ပါတယ်။ ဘာလို့လဲဆိုတော့ JavaScript ဟာ Code Run တဲ့ အချိန်ကျမှသာ “အော်… ဒီ Data က ဒီလို ပုံစံပါလား” ဆိုတာကို သိရတာကိုး။