Typescript Config

Manual Config

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

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

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

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

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

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

export default add;

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

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 က အတူတူပဲ ဖြစ်ပါတယ် ။

{
  "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 မှာ စမ်းပေးပါ ။

tsc --init

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