TS - Union & Literal

Type Level တွေကို ခွဲခြားမယ်

Union အကြောင်းမသွားခင် အောက်က ပုံလေးနဲ့ Level လေးတွေ လေ့လာကြည့်ပါမယ်

ပထမ Level 2 မှာရှိတဲ့ string type ကို သတ်မှတ်ထားမယ်ရင်ဆို စာသား "value" (သို့မဟုတ်) 'value' စာသားမှန်သမျှကို လက်ခံနိုင်ပါပြီ ။ အတူ number type အတွက် နံပါတ် အားလုံးကို လက်ခံနိုင်ပါတယ် ။ boolean type အတွက် true (or) false တန်ဖိုးများကို ထည့်သွင်းနိုင်ပါတယ် ။

Union | (OR)

Type တစ်ခုထက် ပိုပြီး လက်ခံချင်တဲ့အခါ Union | (OR) ကို အသုံးပြုပြီး လက်ခံလို့ရပါတယ် ။

နမူနာ အရ let stringOrNumber: number | string ဆိုပြီး ရေးသားထားပါတယ် ။ string တန်ဖိုးကော number တန်ဖိုးကိုပါ ထည့်သွင်းအသုံးပြုနိုင်ပါတယ် ။

let stringOrNumber: string | number = 1; // ပထမဦးစွာ number ထည့်ပါတယ် ။

stringOrNumber = "Lwin Moe Paing"; // ဒုတိယ String တန်ဖိုး ပြောင်းလဲလိုက်ပါတယ် ။

stringOrNumber = 1500; // နောက် ဂဏန်တန်ဖိုး ထပ်ပြောင်းပါမယ် ။

စာဖတ်သူတို့က boolean type ပါ အသုံးပြုချင်တယ်ဆိုရင် ဘယ်လို ရေးရမလဲ အဖြေရှာကြည့်ပါ ။

အဖြေကတော့ အောက်ပါအတိုင်းဖြစ်သွားမှာပါ ။

let strOrBooOrNo: string | number | boolean = true ; 

Literal Union

Union ကို အခြေခံအားဖြင့် ရသွားပါပြီ ။ သို့ပေ့မယ် တကယ့်လက်တွေ့မှာ Literal Union ကို အသုံးများပါတယ် ။ Literal ဆိုတာက တိတိ ကျကျ သတ်မှတ်ထားတဲ့ တန်ဖိုးတွေကိုပြောချင်တာပါ ။

နမူနာပုံထဲကအတိုင်း Backend Server ကနေ API JSON ရလာပါမယ် ။ အထဲမှာ statusCode အနေနဲ့ 200 ရလာပြီး orderStatus အနေနဲ့ "pending" ကို ရလာပါတယ် ။

Backend Documentation အရ orderStatus တန်ဖိုးသည် pending , delivered , success ပဲရမယ် ၊ statusCode တန်ဖိုးသည် 200 သို့မဟုတ် error တစ်ခုခုဖြစ်ခဲ့ရင် 400 ပြန်မယ်လို့ ရေးထားမယ် ။

Type အရ orderStatus type ကို string ပဲ လက်ခံတာထက် တိတိကျကျ တန်ဖိုး pending , delivered , success ကိုပဲ လက်ခံတာကောင်းပါတယ် ။ ဒါမျိုး TypeScript မှာ Literal Union ပုံစံနဲ့ ရေးလို့ရပါတယ် ။

let orderStatus: "pending" | "delivered" | "success" ပုံစံနဲ့ နဲ့ Literal Union Type ရေးသားလိုက်တာပါ ။

စာဖတ်သူတို့က statusCode အတွက် တန်ဖိုး 200 နဲ့ 400 ပဲလက်လို့ရမယ့် type variable တစ်ခု တည်ဆောက်ကြည့်ပေးပါ ။

အဖြေကတော့ အောက်ပါ Code အတိုင်း ရလာမှာဖြစ်ပါတယ် ။

let statusCode: 200 | 400 = 200 ; 

Literal Union နဲ့ မှားတတ်သောအရာ

ပထမဆုံး Level ခွဲထားတဲ့ ပုံကို မှတ်မိဦးမယ်ထင်ပါတယ် ။ Level 2 Primitive Type - String က အောက်က Literal Type ထက် Priority ပိုမြင့်ပါတယ် ။

Literal union type + Primitive type ကို အတူတူရေးသားလိုက်မယ်ဆိုရင် priority မြင့်တဲ့ Type က Overwrite သွားမှာပါ ။

String က Priority မြင့်တဲ့အတွက် စာသားတန်ဖိုး အားလုံးကို လက်ခံသွားနိုင်ပါတယ် ။ admin နဲ့ user Literal တွေကို Suggestion လည်းပေးမှာမဟုတ်တော့ပါဘူး ။

ဒီလောက်ဆို Union အကြောင်း နားလည်ပြီလို့ လို့ယူဆပါတယ် ။