# Typescript Config

### Manual Config

Typescript စလုပ်တော့မယ် ဆိုရင်  ချန်ထားလို့မရတာက config ချတာပဲဖြစ်ပါတယ် ။

`001-ts-compile-to-js` နာမည်နဲ့ ဖိုလ်ဒါ အသစ်တစ်ခု ဆောက်လိုက်ပါမယ် ။ အတွင်းမှာ `index.ts` ရယ် ၊ `math.js` ရယ် ၊ `tsconfig.json` ဆိုတဲ့ ဖိုင် (၃) ဖိုင် ပြုလုပ်ပါမယ် ။



`tsconfig.json`  ထဲမှာ အောက်က code ကို save လိုက်ပါမယ် ။

```json
{
  "compilerOptions": {
    "strict": true,
    "target": "ES5",
    "module": "ESNext",
    "outDir": "./dist"
  }
}
```

`math.ts`  ဖိုင်ထဲမှာ `add` function code ကို ရေးသားလိုက်ပါမယ် ။&#x20;

```typescript
const add = (a: number, b: number) => {
  return a + b;
};

export default add;
```

`index.ts`  ဖိုင် ထဲမှာ အောက်က code ကို save လိုက်ပါမယ် ။&#x20;

```typescript
import add from "./math";

const myName = "Lwin";

{
  const myName = "Inner Scope Lwin";
  const output = `My name is ${myName}`;
  console.log(output);
}

add(1, 2);
```

စာဖတ်သူက  `tsc` ဆိုတဲ့ command နဲ့  Terminal မှာ စမ်းလိုက်လို့ရပါတယ် ။  ဒါဆိုရင် `dist`  ဆိုတဲ့ ဖိုလ်ဒါထဲမှာ javascript ဖိုင်တွေအဖြစ် ရောက်သွားတာကိုတွေ့ရမှာပါ ။&#x20;

<figure><img src="https://4062235122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7tekcoDYDaKhlNreT5uK%2Fuploads%2FHBRMGNARdfJ1iAuX6iNq%2FTypescript%20Compiling.png?alt=media&#x26;token=f8ea0e6f-8fc8-4729-af77-f1bc7ff9547b" alt=""><figcaption></figcaption></figure>

`tsconfig.json` ဆိုတဲ့ ဖိုင်က config ချတဲ့ ဖိုင်ဖြစ်ပါတယ် ။ &#x20;

`compilerOptions` ကို အဓိကထား လေ့လာသွားပါမယ် ။

ပထမဆုံးတွေ့ရတဲ့ `outDir` ဆိုတဲ့ Property အဓိပ္ပါယ်သည်  `.js` ဖိုင်တွေကို ဘယ်ဖိုလ်ဒါ (Directory) ထဲမှာ ပြုလုပ်မယ်(ထွက်ရှိမယ်) ဆိုတာ သတ်မှတ်ခြင်း ဖြစ်ပါတယ် ။&#x20;



`strict` ကို `true` လုပ်ထားတာ (Strict Type-Checking) ကို ဖွင့်ထားမယ်လို့ ဆိုလိုတာပါ ။ `undefined` , `null` တို့ကို သုံးတဲ့နေရာ မှန်ကန်ဖို့ရယ် ၊ Code Structure ကို ကျစ်ကျစ်လစ်လစ် ရှိစေချင်တဲ့ အတွက်  အသုံးပြုကြ ပါတယ် ။



`target`  ထဲမှာ `ES5` ကို ရွေးချယ်ထားပါတယ် ။ အဓိပ္ပါယ်က ထွက်လာမယ့် `.js`  ဖိုင်တွေသည် Escma 5 version အဖြစ်သို့ ပြုလုပ်မယ်လို့ သတ်မှတ်ထားတာပါ ။&#x20;



2009 ခုနှစ်မှာ  ECMAScript 5 (ES5) က Release လုပ်ဖြစ်ခဲ့ပါတယ် ။ အခု Modern JavaScript ရေးထုံးတွေမှာ တွေ့ရတဲ့ `let` `const`  တို့လို scope variable တွေ မရှိသေးပါဘူး ။ `var` တစ်လုံးပဲ သုံးလို့ရပါသေးတယ် ။&#x20;



2015 မှာ ထွက်ရှိလာတဲ့ ECMAScript 6 ကျမှ ပိုပြီး Modern နဲ့ Readable ဖြစ်စေမယ့် Feature တွေ syntax တွေနဲ့အတူ ထွက်ရှိလာပါတယ် ။ ဥပမာ အားဖြင့် Arrow function `=>`, Template Literals, Destructuring လုပ်တာတွေပါ လာပါတယ် ။&#x20;

<figure><img src="https://4062235122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7tekcoDYDaKhlNreT5uK%2Fuploads%2FEdw1tPHzrE4Ps5mn7sVL%2FTypescript%20ES6%20-_%20ES5.png?alt=media&#x26;token=813a8cdb-5c65-4379-af83-858de2030810" alt=""><figcaption></figcaption></figure>

> မှတ်ချက် ။  ။ 2015 မှာထွက်တဲ့ ES6 ကို ES2015 လို့လည်းခေါ်ဝေါ်ကြပါတယ် ။ ဒါ့ကြောင့် ES6 နဲ့ ES2015 က အတူတူပဲ ဖြစ်ပါတယ် ။&#x20;

```typescript
{
  "compilerOptions": {
    // ... other configs
    "target": "ESNext",
  }
}
```

စာဖတ်သူက `target` ရဲ့ တန်ဖိုးကို `ESNext` လို့ပြောင်းပြီး `tsc` command နဲ့ JavaScript ဖိုင်ကို ပြောင်းကြည့်ပါ ။ ဒါဆိုရင် ထွက်လာမယ့် ဖိုင်တွေထဲမှာ `var` တွေမဟုတ်တော့ဘဲ Modern JavaScript ရေးထုံးတွေကို Support သွားမှာဖြစ်ပါတယ် ။



target ရဲ့ တန်ဖိုးနေရာမှာ "ES5", "ES6", "ES2015", ကနေ လက်ရှိ "ES2024" အထိ ကိုယ်ပြောင်းလဲချင်တဲ့ Version ရွေးချယ်လို့ရပါတယ် ။ `ESNext` ဆိုတာကတော့ နောက်ဆုံးလက်ရှိ ရောက်နေတဲ့ Version ကို ဆိုလိုချင်တာပါ ။



`module`  ထဲမှာ `ESNext` ကို ရွေးချယ်ထားပါတယ် ။ ES6 ကနေစပြီးတော့ `import` နဲ့ `export` တို့ကို စပြီး Support နေပါပြီ ။ ကျွန်တော်တို့က  NodeJs Environment အတွက်ပဲ ရေးသားမယ်ဆိုရင် `CommonJs` ကိုပြောင်းပြီး သုံးနိုင်ပါတယ် ။&#x20;

<figure><img src="https://4062235122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7tekcoDYDaKhlNreT5uK%2Fuploads%2Flp3VjdDHgGGS2QtVitUQ%2FTypescript%20Module%20to%20Common%20Module.png?alt=media&#x26;token=4f80d165-fda9-4c91-aa61-01d389113988" alt=""><figcaption></figcaption></figure>

အခြား ရွေးချယ်စရာ Module Type တွေအတွက် "UMD", "AMD", "System" တို့ ရှိပါသေးတယ် ။ သို့ပေ့မယ် ဒီစာအုပ်မှာတော့ အဲ့ Module type တွေတော့ အကျယ်တဝံ့ မရေးသွားတော့ပါဘူး ။

### Config Init with `tsc`&#x20;

အရင်ဆုံး တည်ဆောက်ခဲ့တဲ့ `tsconfig.json` ကို delete လိုက်ပါမယ် ။ `tsc` command နဲ့ initialize လုပ်ပါမယ် အောက်က code ကို terminal မှာ စမ်းပေးပါ ။&#x20;

```sh
tsc --init
```

ဒါဆိုရင် tsconfig.json ကို အလိုအလျောက် တည်ဆောက်သွားမှာဖြစ်ပြီး ၊ အထဲက code အတွင်းမှာလေ့လာလို့ရမယ့် [https://aka.ms/tsconfig](https://aka.ms/tsconfig) လင့်ကို ဖော်ပြထားမှာဖြစ်ပါတယ် ။\
