> For the complete documentation index, see [llms.txt](https://lwin-moe-paing.gitbook.io/typescript-baby-by-lwin-moe-paing/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lwin-moe-paing.gitbook.io/typescript-baby-by-lwin-moe-paing/basic-typescript/ts-union-and-literal.md).

# TS - Union & Literal

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

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

<figure><img src="/files/cDs8sgqKiJyTkcNVrPks" alt=""><figcaption></figcaption></figure>

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

### Union | (OR)

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

<figure><img src="/files/XsziwuPbd5pQlmZ2xZPy" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

```typescript
let strOrBooOrNo: string | number | boolean = true ; 
```

### Literal Union &#x20;

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

<figure><img src="/files/ikMC3DeICKsDEfBDxHJ0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2SqZbMG93q3AnN12XHR6" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/LFXfYwAdJWAJNO6jd2kW" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/rwhFTY3SAsr0rxhGIuYO" alt=""><figcaption></figcaption></figure>

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

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

```typescript
let statusCode: 200 | 400 = 200 ; 
```

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

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

<figure><img src="/files/HVOpjfTJnGKbNppDdbCr" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/rwsXeZReIQDwPabmobmh" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/4YoygOu2u5zJLeMkmbou" alt=""><figcaption></figcaption></figure>

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