Ano ang TypeScript? Gabay sa Simpleng Salita para sa Hindi Developer

Ang TypeScript ay JavaScript na may types. Nagdaragdag ka ng mga label na nagsasabi kung anong uri ng data ang dapat maging bawat value — numero, teksto, listahan ng mga order — at sinusuri ng TypeScript ang code mo para sa mga hindi pagtutugma bago pa ito tumakbo. Inilalarawan ito ng TypeScript site bilang "JavaScript with syntax for types"; tinatanggal ang mga type kapag ginawang ordinaryong JavaScript ang code, at tumatakbo ang JavaScript na iyon saanman tumatakbo ang JavaScript.

Bakit mahalaga ito kapag gumagawa ka gamit ang AI

Mabilis magsulat ng code ang mga AI model, at ang mabilis na code ay may pagkakamali: field na customerName sa isang file at customer_name sa isa pa, presyong ipinasa bilang teksto sa halip na numero, function na tinawag na may nawawalang value. Sa plain JavaScript, marami sa mga pagkakamaling iyon ay lumalabas lamang kapag may nag-click ng maling button.

Maagang nahuhuli ng TypeScript ang marami sa mga ito, habang isinusulat pa ang code:

• Agad na feedback ang natatanggap ng AI. Itinuturo ng mga type error ang eksaktong maling linya, kaya maaayos ito ng agent bago mo pa makita.
• Mas ligtas ang mga pagbabago. Kapag pinalitan mo ang pangalan ng field, mamarkahan ng TypeScript ang bawat lugar na gumagamit pa ng lumang pangalan.
• Nagpapaliwanag sa sarili ang code. Idinodokumento ng mga type kung ano ang inaasahan at ibinabalik ng function, na nakakatulong sa iyo, sa AI, at sa sinumang developer na gagawa dito sa hinaharap.
• Mas matalino ang mga editor. Mas gumagana ang autocomplete at "go to definition" dahil alam ng editor kung ano ang bawat value.

Malaking dahilan ito kung bakit ginagawang default ng maraming AI app builder ang TypeScript.

Isang pang-araw-araw na halimbawa

Isipin ang isang shipping warehouse na may may-label na mga bay. May sign ang bawat bay: "Pallets only", "Refrigerated", "Max 500 kg". Kapag dumating ang delivery, sinusuri ng checker sa pintuan ang mga kalakal laban sa sign. Ang frozen na isda na patungo sa dry-goods bay ay mapipigilan sa pintuan, hindi matutuklasan makalipas ang isang linggo kapag mabaho na.

Ang TypeScript ang checker sa pintuan. Ang mga type ang mga sign. Nangyayari ang pagsusuri bago pumasok sa paggamit ang mga kalakal — ang code mo. At kapag nasa lugar na ang lahat, tinatanggal na ang mga sign: wala nang types ang JavaScript na tumatakbo.

Paano gumagana ang TypeScript

1. Ikaw (o ang AI) ang sumusulat ng .ts o .tsx files — TypeScript, na may type labels.
2. Binabasa ng type checker ang code at iniuulat ang mga hindi pagtutugma bilang error sa editor o build.
3. Tinatanggal ng build step ang mga type, at gumagawa ng plain JavaScript.
4. Tumatakbo ang JavaScript sa browser o sa server (Node.js, Deno, Bun).

Isang mahalagang kahihinatnan: sinusuri ng TypeScript ang code na isinulat mo, hindi ang data na dumarating habang tumatakbo ang app. Kung may ibalik na hindi inaasahan ang external API, hindi ito makikita ng TypeScript maliban kung magdadagdag ka ng runtime validation.

Isang halimbawa: booking form

Ipagpalagay na gumagawa ka ng booking app para sa isang hair salon. Narito ang type na naglalarawan ng booking:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

At isang function na kinukuwenta ang deposit:

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

Ngayon, tingnan kung ano ang nahuhuli ng TypeScript.

Maling baybay na field.

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

Iniuulat ng TypeScript na hindi kilalang property ang prise at nawawala ang price. Sa plain JavaScript, tahimik nitong kukuwentahin ang deposit bilang NaN (hindi numero).

Maling uri ng value.

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

Iniuulat ng TypeScript na hindi maaaring gamitin ang string kung saan inaasahan ang numero. Kung wala ito, gumagana ang "40" * 0.2 nang hindi sinasadya, pero ang "40" + 5 ay nagbibigay ng "405" — ang uri ng bug na lumalabas sa invoice.

Serbisyong hindi umiiral.

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

Iniuulat ng TypeScript na hindi ang "perm" ay isa sa mga pinapayagang serbisyo. Kapag nagdagdag ang salon ng perms sa hinaharap, idadagdag mo ito sa type, at ipapakita ng TypeScript ang bawat lugar na kailangang i-update — ang price list, ang form, ang mga kulay ng calendar.

Ang hindi nito mahuhuli. Kung ipapadala ng booking form ang price: "40" mula sa browser patungo sa server, hindi ito makikita ng TypeScript sa server habang tumatakbo. Kaya karaniwang nagva-validate din ng papasok na data ang mga well-built na app, kadalasan gamit ang validation library na sinusuri ang hugis at ginagawa itong tamang Booking.

TypeScript vs JavaScript

Mga termino na ipinaliwanag

Mga karaniwang pagkakamali at maling akala

• "Ginagawang walang bug ng TypeScript ang code." Nahuhuli nito ang mga hindi pagtutugma sa hugis ng data, hindi ang maling lohika. Pumapasa sa type check ang deposit na 2% sa halip na 20%.
• "Pinoprotektahan ako ng types mula sa maling input." Nawawala ang types sa runtime. Mag-validate ng data mula sa mga user, form, at API.
• any kahit saan. Kapag na-stuck ang AI, maaari itong gumamit ng any o // @ts-ignore para patahimikin ang mga error. Tinatago nito ang mga problema sa halip na ayusin ang mga ito.
• Pagbalewala sa type error dahil gumagana ang preview. May ilang tool na nagpapatakbo pa rin ng code na may type error. Ang mga error ay bug na naghihintay mangyari.
• "Mas mabagal ang TypeScript." Tinatanggal ang mga type bago tumakbo; halos pareho ang JavaScript na tumatakbo.
• "Para lang ito sa malalaking team." Nakikinabang din ang mga solo builder, lalo na kapag karamihan ng pag-edit ay ginagawa ng AI.

Ano ang hihilingin sa iyong AI builder

• "Gumamit ng TypeScript na naka-strict mode."
• "Magtakda ng shared types para sa mga pangunahing record namin — Customer, Booking, Invoice — at gamitin ang mga ito sa frontend at backend."
• "Huwag gumamit ng any o @ts-ignore para lampasan ang mga error; ayusin ang pinagmulang problema at sabihin sa akin kung ano ito."
• "I-validate ang lahat ng papasok na data sa server, hindi lamang gamit ang types."
• "Patakbuhin ang type checker at ayusin ang bawat error bago mo sabihing tapos na."
• "Kapag pinalitan mo ang pangalan ng field, i-update ang bawat lugar na minamarkahan ng TypeScript."
• "Ipaliwanag ang error na ito sa simpleng English."

Para sa higit pa sa pag-check ng nagawa ng AI, tingnan ang paano suriin ang code na gawa ng AI at paano mag-debug ng app na gawa ng AI.

TypeScript sa Mythex

Kapag wala kang hinihinging partikular, nagsisimula ang mga bagong project sa Mythex sa Vite + React + TypeScript + Tailwind. Kasama sa code editor ang language intelligence — completions, diagnostics, at go-to-definition para sa TypeScript at JavaScript, kasama ng iba pang wika — kaya nakikita ang mga type error sa code, hindi lamang sa preview. Read-only ang editor sa Free at ganap na maaaring i-edit sa Pro. Maaari ka pa ring humiling ng ibang setup sa unang prompt mo; ipinaliliwanag ito ng docs page tungkol sa paano pinipili ang tech, at saklaw ng code editor docs ang ipinapakita ng editor.

Mga tanong