> 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-generic.md).

# TS - Generic

### Generic ဆိုတာ ?

<figure><img src="/files/9qwu0A0KkNKeJpoMNUvu" alt=""><figcaption></figcaption></figure>

Generic ဆိုတာ အလွယ်အားဖြင့် မသိသေးတဲ့ data type ကို လက်ခံရရှိပြီး အဲ့ data type ကို ပြန်လည်အသုံးချတာဖြစ်ပါတယ် ။ Syntax က `<` နဲ့ `>` ကြားထဲမှာ Generic Type ကိုထည့်သွင်း အသုံးပြုတာဖြစ်ပါတယ်။

### Generic Function

`<T> ( value: T ): T` ရေးသားနည်းနဲ့ Generic Function ကို ရေးသားပါတယ် ။&#x20;

T က Dynamic Type ကို ရည်ညွှန်းထားတာပါ ။&#x20;

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

`T` ထဲကို အခြား Type တွေကို အစားထိုး ကြည့်မယ်ဆိုရင် ...

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

`T` က string အနေနဲ့ အစားထိုးမယ်ဆိုရင် ၊ လက်ခံမယ့် Parameter `(value: string)` ဖြစ်ပြီး Return type က လည်း `string` ဖြစ်သွားမှာပါ ။

`T` က number ဖြစ်မယ်ဆိုရင် ၊ Parameter `(value: number)` ဖြစ်ပြီး Return type က `number` ဖြစ်သွားမှာပါ ။&#x20;

\
`T = boolean` ဆိုလည်း ထိုနည်းလည်းကောင်းပါပဲ ။

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

ဘယ်ဘက် code အရ `identity("Hello World")` function ခေါ်လိုက်တာက ၊ Parameter အရ `string` type ဖြစ်တဲ့အတွက် Return Type သည် `string` type ပဲ ရလာမှာဖြစ်ပါတယ် ။ ဒါကို `str` variable ကို mouse နဲ့ ခဏအကြာ hover လုပ်လိုက်ရင် `let str: string` ဆိုပြီး  ပေါ်လာတာတွေ့နိုင်မှာပါ ။

ညာဘက်ပုံ code  `identity(42)` မှာ ၊ Parameter `value` type ဖြစ်ပြီး Return ကလည်း `value` type ဖြစ်လာပါတယ် ။

&#x20;ဒီနည်းလမ်းနဲ့ Generic Type \<T> Function တွေ ရေးသားနိုင်ပါတယ်  ။

အခု Primitive Type တွေ အစား Complex ဖြစ်တဲ့ User Object တစ်ခုလုပ်ပြီး ထည့်သွင်း အသုံးပြုကြည့်ပါမယ် ။

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

User Object type တစ်ခု ဖန်တီးလိုက်ပါမယ် ။&#x20;

စာဖတ်သူတို့က `< T >`  နေရာမှာ User Type ကို အစားထိုးကြည့်လိုက်ပါ ။

Return Type ကလည်း User Type ရသွားမှာဖြစ်ပါတယ် ။

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

Code အပြည့်စုံကို မိမိစက်ထဲမှာ ထည့်သွင်း စမ်းရေးကြည့်ပါ ။

### Exercise for Generic

Exercise အနေနဲ့  စာဖတ်သူတို့ကို ပုစ္ဆာတစ်ပုဒ် စဉ်းစားခိုင်းပါမယ် ။

<mark style="color:yellow;">successResponse</mark><mark style="color:red;">(</mark><mark style="color:orange;">"Hello"</mark><mark style="color:red;">)</mark> function ကို ခေါ်သုံးလိုက်လျင် ၊ Return အနေနဲ့&#x20;

<mark style="color:purple;">{</mark> <mark style="color:blue;">success</mark>: <mark style="color:green;">true</mark>, <mark style="color:blue;">data</mark>: <mark style="color:yellow;">"Hello"</mark> <mark style="color:purple;">}</mark>ကို ပြန်ရမှာဖြစ်ပါတယ် ။

<mark style="color:yellow;">successResponse</mark><mark style="color:red;">(</mark> <mark style="color:purple;">{</mark> <mark style="color:purple;">id</mark>: <mark style="color:green;">1</mark>, <mark style="color:purple;">name</mark>: <mark style="color:yellow;">"LMP"</mark> <mark style="color:purple;">}</mark> <mark style="color:red;">)</mark>  function မှာ ၊ Return Type က&#x20;

<mark style="color:red;">{</mark> <mark style="color:blue;">success</mark>: <mark style="color:green;">true</mark>, <mark style="color:blue;">data</mark>: <mark style="color:purple;">{</mark>  <mark style="color:purple;">id</mark>: <mark style="color:green;">1</mark>, <mark style="color:purple;">name</mark>: <mark style="color:yellow;">"LMP"</mark> <mark style="color:purple;">}</mark> <mark style="color:red;">}</mark> ကို ပြန်ရမှာဖြစ်ပါတယ် ။

စာဖတ်သူတို့က <mark style="color:yellow;">`successResponse`</mark> ကို generic function တစ်ခုအနေနဲ့ ရေးကြည့်ပါ ။

<figure><img src="/files/41gmQdbTp8J7spKeYVQT" alt=""><figcaption></figcaption></figure>

ဟုတ်ပါတယ် Return type နေရာမှာ `{ success: boolean, data: T }` လို့ပြောင်းပေးလိုက်ရင် မှန်ပါတယ် ။  `T`  နေရာမှာ အစားထိုးလိုက်တဲ့ Code ပုံလေးကို တစ်ချက်ကြည့်ကြပါမယ် ။

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

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

helloResult ကို mouse နဲ့ ခဏအကြာ တင်ထားလိုက်ရင် ၊&#x20;

return type ကို ထည့်လိုက်တဲ့ Type အတိုင်း Dynamic Return ပြန်နေတာတွေ့ရမှာပါ ။

### Generic Type

`type Generic<T> = T`  ရေးသားနည်းနဲ့ Generic Type ကို ရေးသားနိုင်ပါတယ် ။

Exercise မှာရေးခဲ့တဲ့ Return Type ကိုပဲ Custom Generic Type အနေနဲ့ ရေးပြသွားပါမယ် ။

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

Type ကို Response နာမည်နဲ့ Generic Type အမျိုးအစားရေးသားလိုက်ပါတယ် ။&#x20;

ညာဘက် Code က string type ကို အစားထိုး ရေးထားတာဖြစ်ပါတယ် ။

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

နမူနာ Code ထဲကအတိုင်း Response ဆိုရင် data နေရာမှာ number type ဖြစ်မှာပါ ။

`<` နဲ့ `>` ကြားထဲမှာ Type တွေကို ပြောင်းလဲ ပြီး မိမိစက်ထဲမှာ စမ်းနိုင်ပါတယ် ။

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

နားလည်သွားပြီဆိုရင် ခုဏက Exercise ပုစ္ဆာရဲ့ Response Type ကို အခုလို ပြောင်းလဲ ရေးသားလိုက်လို့ရပါပြီ ။