> 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/typescript-config.md).
# 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 ကို ရေးသားလိုက်ပါမယ် ။
```typescript
const add = (a: number, b: number) => {
return a + b;
};
export default add;
```
`index.ts` ဖိုင် ထဲမှာ အောက်က code ကို save လိုက်ပါမယ် ။
```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 ဖိုင်တွေအဖြစ် ရောက်သွားတာကိုတွေ့ရမှာပါ ။
`tsconfig.json` ဆိုတဲ့ ဖိုင်က config ချတဲ့ ဖိုင်ဖြစ်ပါတယ် ။
`compilerOptions` ကို အဓိကထား လေ့လာသွားပါမယ် ။
ပထမဆုံးတွေ့ရတဲ့ `outDir` ဆိုတဲ့ Property အဓိပ္ပါယ်သည် `.js` ဖိုင်တွေကို ဘယ်ဖိုလ်ဒါ (Directory) ထဲမှာ ပြုလုပ်မယ်(ထွက်ရှိမယ်) ဆိုတာ သတ်မှတ်ခြင်း ဖြစ်ပါတယ် ။
`strict` ကို `true` လုပ်ထားတာ (Strict Type-Checking) ကို ဖွင့်ထားမယ်လို့ ဆိုလိုတာပါ ။ `undefined` , `null` တို့ကို သုံးတဲ့နေရာ မှန်ကန်ဖို့ရယ် ၊ Code Structure ကို ကျစ်ကျစ်လစ်လစ် ရှိစေချင်တဲ့ အတွက် အသုံးပြုကြ ပါတယ် ။
`target` ထဲမှာ `ES5` ကို ရွေးချယ်ထားပါတယ် ။ အဓိပ္ပါယ်က ထွက်လာမယ့် `.js` ဖိုင်တွေသည် Escma 5 version အဖြစ်သို့ ပြုလုပ်မယ်လို့ သတ်မှတ်ထားတာပါ ။
2009 ခုနှစ်မှာ ECMAScript 5 (ES5) က Release လုပ်ဖြစ်ခဲ့ပါတယ် ။ အခု Modern JavaScript ရေးထုံးတွေမှာ တွေ့ရတဲ့ `let` `const` တို့လို scope variable တွေ မရှိသေးပါဘူး ။ `var` တစ်လုံးပဲ သုံးလို့ရပါသေးတယ် ။
2015 မှာ ထွက်ရှိလာတဲ့ ECMAScript 6 ကျမှ ပိုပြီး Modern နဲ့ Readable ဖြစ်စေမယ့် Feature တွေ syntax တွေနဲ့အတူ ထွက်ရှိလာပါတယ် ။ ဥပမာ အားဖြင့် Arrow function `=>`, Template Literals, Destructuring လုပ်တာတွေပါ လာပါတယ် ။
> မှတ်ချက် ။ ။ 2015 မှာထွက်တဲ့ ES6 ကို ES2015 လို့လည်းခေါ်ဝေါ်ကြပါတယ် ။ ဒါ့ကြောင့် ES6 နဲ့ ES2015 က အတူတူပဲ ဖြစ်ပါတယ် ။
```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` ကိုပြောင်းပြီး သုံးနိုင်ပါတယ် ။
အခြား ရွေးချယ်စရာ Module Type တွေအတွက် "UMD", "AMD", "System" တို့ ရှိပါသေးတယ် ။ သို့ပေ့မယ် ဒီစာအုပ်မှာတော့ အဲ့ Module type တွေတော့ အကျယ်တဝံ့ မရေးသွားတော့ပါဘူး ။
### Config Init with `tsc`
အရင်ဆုံး တည်ဆောက်ခဲ့တဲ့ `tsconfig.json` ကို delete လိုက်ပါမယ် ။ `tsc` command နဲ့ initialize လုပ်ပါမယ် အောက်က code ကို terminal မှာ စမ်းပေးပါ ။
```sh
tsc --init
```
ဒါဆိုရင် tsconfig.json ကို အလိုအလျောက် တည်ဆောက်သွားမှာဖြစ်ပြီး ၊ အထဲက code အတွင်းမှာလေ့လာလို့ရမယ့် လင့်ကို ဖော်ပြထားမှာဖြစ်ပါတယ် ။