TypeScript ဆိုတာ ဘာလဲ? Non-Developer များအတွက် ရိုးရှင်းသော လမ်းညွှန်

TypeScript သည် type ပါသော JavaScript ဖြစ်သည်။ တန်ဖိုးတစ်ခုစီ ဘယ်လိုအမျိုးအစား data ဖြစ်သင့်သည်ကို — ဂဏန်း၊ စာသား၊ order စာရင်း — ဖော်ပြသော အမှတ်အသားများ ထည့်သည်၊ ထို့နောက် TypeScript က code မ run မီ သင့် code ၏ မကိုက်ညီမှုများကို စစ်ဆေးသည်။ TypeScript site က ၎င်းကို "type အတွက် syntax ပါသော JavaScript" ဟု ဖော်ပြသည်။ Code ကို ရိုးရိုး JavaScript သို့ ပြောင်းသည့်အခါ type များကို ဖယ်ရှားပြီး JavaScript run သည့် နေရာတိုင်းတွင် ထို JavaScript ကို run နိုင်သည်။

AI ဖြင့် တည်ဆောက်သောအခါ ဘာကြောင့် အရေးကြီးသလဲ

AI model များသည် code ကို အမြန်ရေးသော်လည်း အမြန် code တွင် အမှားများ ရှိတတ်သည်: ဖိုင်တစ်ခုတွင် customerName နှင့် အခြားဖိုင်တွင် customer_name ဟု field အမည်တူတူ မဟုတ်ခြင်း၊ စျေးနှုန်းကို ဂဏန်းအစား စာသားအဖြစ် ပို့ခြင်း၊ တန်ဖိုးမပါဘဲ function ခေါ်ခြင်း။ Plain JavaScript တွင် ထိုအမှားများစွာသည် တစ်စုံတစ်ယောက်က မှားသော ခလုတ်ကို နှိပ်သောအခါမှ ပေါ်လာတတ်သည်။

TypeScript သည် code ရေးနေချိန်တွင် ၎င်းတို့အများစုကို စောစောစီးစီး ဖမ်းသည်:

• AI သည် ချက်ချင်း feedback ရသည်။ Type အမှားများက မှန်ကန်မှုမရှိသော အတိအကျ line ကို ညွှန်ပြသောကြောင့် agent က သင်မတွေ့မီ ပြင်နိုင်သည်။
• ပြောင်းလဲမှုများ ပိုလုံခြုံသည်။ Field တစ်ခုကို အမည်ပြောင်းလိုက်သည်ဆိုပါစို့၊ TypeScript က ဟောင်းအမည်ကို ဆက်သုံးနေသော နေရာတိုင်းကို အမှတ်အသား ပြုသည်။
• Code က သူ့ဘာသာ ရှင်းပြသည်။ Type များက function မျှော်လင့်သည်နှင့် ပြန်ပေးသည်ကို မှတ်တမ်းတင်ပေးသဖြင့် သင်၊ AI နှင့် နောက်ပိုင်း ဆက်လုပ်သော developer တိုင်းအတွက် အထောက်အကူ ဖြစ်သည်။
• Editor များ ပိုဉာဏ်ရှိလာသည်။ Editor က တန်ဖိုးတိုင်း ဘာဖြစ်သည်ကို သိသောကြောင့် autocomplete နှင့် "go to definition" ပိုကောင်းစွာ အလုပ်လုပ်သည်။

AI app builder အများအပြား TypeScript ကို default အဖြစ် သုံးရခြင်း၏ အဓိက အကြောင်းရင်းတစ်ခု ဖြစ်သည်။

နေ့စဉ်ဘဝမှ ဥပမာ

အမည်တပ်ထားသော bay များပါသော ပို့ဆောင်ရေး ဂိုဒေါင်ကို စဉ်းစားကြည့်ပါ။ Bay တစ်ခုစီတွင် ဆိုင်းဘုတ် ရှိသည်: "Pallet သာ"၊ "အအေးခံထားသည်"၊ "အများဆုံး 500 kg"။ ပစ္စည်း ရောက်လာသောအခါ တံခါးဝရှိ စစ်ဆေးသူက ပစ္စည်းကို ဆိုင်းဘုတ်နှင့် နှိုင်းယှဉ်သည်။ Dry-goods bay သို့ သွားမည့် အေးခဲငါးသည် တံခါးဝတွင် ရပ်တန့်ခံရသည်၊ တစ်ပတ်အကြာ နံလာမှ ရှာတွေ့ခြင်း မဟုတ်ပါ။

TypeScript သည် တံခါးဝရှိ စစ်ဆေးသူ ဖြစ်သည်။ Type များသည် ဆိုင်းဘုတ်များ ဖြစ်သည်။ စစ်ဆေးမှုသည် ပစ္စည်း — သင့် code — အသုံးမပြုမီ ဖြစ်သည်။ အရာအားလုံး နေရာချပြီးသည်နှင့် ဆိုင်းဘုတ်များကို ဖယ်ရှားသည်: run နေသော JavaScript တွင် type မကျန်တော့ပါ။

TypeScript အလုပ်လုပ်ပုံ

1. သင် (သို့မဟုတ် AI) က .ts သို့မဟုတ် .tsx ဖိုင်များ ရေးသည် — type အမှတ်အသားပါသော TypeScript။
2. Type checker က code ကို ဖတ်ပြီး မကိုက်ညီမှုများကို editor သို့မဟုတ် build တွင် အမှားအဖြစ် ပြသည်။
3. Build အဆင့်က type များကို ဖယ်ရှားပြီး ရိုးရိုး JavaScript ကို ထုတ်ပေးသည်။
4. JavaScript က browser သို့မဟုတ် server (Node.js၊ Deno၊ Bun) ပေါ်တွင် run သည်။

အရေးကြီးသော အကျိုးဆက်တစ်ခုမှာ TypeScript သည် app run နေစဉ်ရောက်လာသော data ကို မစစ်ဘဲ သင်ရေးထားသော code ကိုသာ စစ်သည်။ ပြင်ပ API က မမျှော်လင့်သော အရာပြန်ပို့ပါက runtime validation မထည့်ထားလျှင် TypeScript က မမြင်နိုင်ပါ။

လက်တွေ့ ဥပမာ - booking form

ဆံသဆိုင်အတွက် booking app တည်ဆောက်နေသည်ဆိုပါစို့။ Booking ကို ဖော်ပြသော type ဤသို့ ဖြစ်သည်:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? ဆိုသည်မှာ ရွေးချယ်စရာ
};

နှင့် deposit တွက်ချက်သော function:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

ယခု TypeScript ဖမ်းသည့်အရာများကို ကြည့်ပါ။

Field အမည် မှားရေးခြင်း။

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript က prise သည် သိထားသော property မဟုတ်ကြောင်းနှင့် price ပျောက်နေကြောင်း အစီရင်ခံသည်။ Plain JavaScript တွင် ဤသည်က တိတ်တဆိတ် NaN (ဂဏန်းမဟုတ်သော) deposit ကို တွက်မည်။

မှားသော အမျိုးအစား တန်ဖိုး။

const booking: Booking = { ...otherFields, price: "40" };

TypeScript က ဂဏန်း မလိုအပ်သော နေရာတွင် စာသား မသုံးနိုင်ကြောင်း အစီရင်ခံသည်။ ၎င်းမရှိပါက "40" * 0.2 သည် အလုပ်ဖြစ်သော်လည်း "40" + 5 သည် "405" ပေးသည် — ငွေတောင်းခံလွှာတွင် ပေါ်သော ပုံစံ bug ဖြစ်သည်။

မရှိသော ဝန်ဆောင်မှု။

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript က "perm" သည် ခွင့်ပြုထားသော ဝန်ဆောင်မှုများထဲမှ တစ်ခုမဟုတ်ကြောင်း အစီရင်ခံသည်။ နောက်ပိုင်း ဆိုင်က perm ထည့်သောအခါ type ထဲတွင် ထည့်လိုက်ရုံဖြင့် အပ်ဒိတ်လုပ်ရမည့် နေရာအားလုံး — စျေးနှုန်းစာရင်း၊ form၊ ပြက္ခဒိန် အရောင်များ — ကို TypeScript က ပြသသည်။

မဖမ်းနိုင်သည့်အရာ။ Booking form က browser မှ server သို့ price: "40" ပို့ပါက server ပေါ်ရှိ TypeScript က runtime တွင် ထိုအရာကို မမြင်ပါ။ ထို့ကြောင့် ကောင်းစွာ တည်ဆောက်ထားသော app များသည် ဝင်လာသော data ကိုလည်း validate လုပ်ပြီး ပုံသဏ္ဍာန်ကို စစ်ကာ မှန်ကန်သော Booking အဖြစ် ပြောင်းသည့် validation library ဖြင့် မကြာခဏ လုပ်ဆောင်သည်။

TypeScript နှင့် JavaScript နှိုင်းယှဉ်ချက်

အသုံးအနှုန်းများ ရှင်းပြချက်

အမှားများနှင့် အထင်မှားများ

• "TypeScript က code ကို bug-free ဖြစ်စေသည်။" Data ပုံသဏ္ဍာန်ရှိ မကိုက်ညီမှုများကိုသာ ဖမ်းသည်၊ မှားသော logic ကို မဟုတ်ပါ။ 20% အစား 2% deposit သည် type စစ်ဆေးမှုအရ အဆင်ပြေသည်။
• "Type များက မကောင်းသော input မှ ကာကွယ်ပေးသည်။" Type များသည် runtime တွင် ပျောက်သွားသည်။ အသုံးပြုသူများ၊ form များနှင့် API များမှ data ကို validate လုပ်ပါ။
• နေရာတိုင်းတွင် any။ AI တစ်ခု ပိတ်မိသောအခါ အမှားများကို ပိတ်ရန် any သို့မဟုတ် // @ts-ignore ကို ရွေးတတ်သည်။ ၎င်းသည် ပြဿနာကို ပြင်ခြင်းမဟုတ်ဘဲ ဖုံးကွယ်ခြင်း ဖြစ်သည်။
• Preview အလုပ်လုပ်သောကြောင့် type အမှားများကို လျစ်လျူရှုခြင်း။ Tool အချို့သည် type အမှားရှိသော code ကိုပင် run သေးသည်။ ထိုအမှားများသည် ဖြစ်လာမည့် bug များ ဖြစ်နေဆဲ ဖြစ်သည်။
• "TypeScript က ပိုနှေးသည်။" Type များကို run မီ ဖယ်ရှားသည်; run သော JavaScript သည် အခြေခံအားဖြင့် တူညီသည်။
• "ကြီးမားသော အဖွဲ့များအတွက်သာ။" Edit အများစုကို AI က လုပ်ဆောင်နေသည့်အခါ တစ်ဦးတည်း builder များလည်း အကျိုးရှိသည်။

AI builder ကို ဘာတောင်းရမလဲ

• "Strict mode ဖွင့်ထားသော TypeScript ကို သုံးပါ။"
• "ကျွန်ုပ်တို့၏ အဓိက record များ — Customer၊ Booking၊ Invoice — အတွက် မျှဝေသော type များ သတ်မှတ်ပြီး frontend နှင့် backend နှစ်ခုစလုံးတွင် သုံးပါ။"
• "အမှားများကို ကျော်ရန် any သို့မဟုတ် @ts-ignore မသုံးပါနှင့်; အခြေခံပြဿနာကို ပြင်ပြီး ဘာဖြစ်သည်ကို ပြောပြပါ။"
• "ဝင်လာသော data အားလုံးကို server ပေါ်တွင် validate လုပ်ပါ၊ type တစ်ခုတည်းဖြင့် မဟုတ်ပါ။"
• "Type checker ကို run ပြီး ပြီးပါပြီဟု မပြောမီ အမှားအားလုံးကို ပြင်ပါ။"
• "Field တစ်ခုကို အမည်ပြောင်းသောအခါ TypeScript ညွှန်ပြသည့် နေရာတိုင်းကို အပ်ဒိတ်လုပ်ပါ။"
• "ဤ type အမှားကို ရိုးရှင်းသော အင်္ဂလိပ်စကားဖြင့် ရှင်းပြပါ။"

AI ထုတ်ပေးသော အရာကို စစ်ဆေးရန် ပိုသိလိုပါက AI ထုတ်ပေးသော code ကို ဘယ်လို review လုပ်မလဲ နှင့် AI ဖြင့် တည်ဆောက်ထားသော app ကို ဘယ်လို debug လုပ်မလဲ ကို ကြည့်ပါ။

Mythex တွင် TypeScript

တစ်စုံတစ်ရာ သီးသန့် မတောင်းဆိုသည့်အခါ Mythex သည် project အသစ်များကို Vite + React + TypeScript + Tailwind ဖြင့် စတင်သည်။ Code editor တွင် language intelligence ပါဝင်သည် — TypeScript နှင့် JavaScript အတွက် completion၊ diagnostics နှင့် go-to-definition အပါအဝင် ဘာသာစကားများစွာအတွက် — ထို့ကြောင့် type အမှားများကို preview တွင်သာမက code ထဲတွင်ပါ မြင်ရသည်။ Editor သည် Free တွင် read-only ဖြစ်ပြီး Pro တွင် အပြည့်အဝ တည်းဖြတ်နိုင်သည်။ ပထမ prompt တွင် အခြား setup ကို ဆက်တောင်းနိုင်သည်; နည်းပညာကို ဘယ်လိုရွေးသလဲ docs စာမျက်နှာက ရှင်းပြထားပြီး code editor docs တွင် editor ပြသသည့်အရာများ ပါဝင်သည်။

မေးခွန်းများ