# TS - Union & Literal

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

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

<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 အကြောင်း နားလည်ပြီလို့ လို့ယူဆပါတယ် ။


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lwin-moe-paing.gitbook.io/typescript-baby-by-lwin-moe-paing/basic-typescript/ts-union-and-literal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
