Mis on TypeScript? Lihtne juhend mitte-arendajatele

TypeScript on JavaScript koos tüüpidega. Lisad sildid, mis ütlevad, millist tüüpi andmed iga väärtus peaks olema — arv, tekst, tellimuste nimekiri — ning TypeScript kontrollib sinu koodi vastuolude suhtes enne, kui see üldse käivitub. TypeScripti veebisait kirjeldab seda kui „JavaScripti koos tüüpide süntaksiga“; tüübid eemaldatakse koodi teisendamisel tavaliseks JavaScriptiks, mis töötab kõikjal, kus JavaScript töötab.

Miks see AI-ga ehitamisel oluline on

AI mudelid kirjutavad kiiresti kooditi ja kiire kood sisaldab vigu: väli nimega customerName ühes failis ja customer_name teises, hind antud tekstina numbri asemel, funktsioon kutsutud ilma väärtuseta. Tavalises JavaScriptis ilmnevad paljud neist vigadest alles siis, kui keegi klõpsab valel nupul.

TypeScript püüab neist paljud varem kinni, juba koodi kirjutamise ajal:

• AI saab kohe tagasisidet. Tüübivead osutavad täpsele valesele reale, nii et agent saab selle parandada enne, kui sa seda näed.
• Muudatused on turvalisemad. Kui nimetad välja ümber, märgib TypeScript kõik kohad, kus on veel vana nimi.
• Kood seletab ennast. Tüübid dokumenteerivad, mida funktsioon eeldab ja tagastab, mis aitab sind, AI-d ja iga arendajat, kes seda hiljem puutub.
• Redaktorid muutuvad targemaks. Automaatne täitmine ja „mine definitsioonile“ töötavad paremini, sest redaktor teab, mis iga väärtus on.

See on suur põhjus, miks paljud AI rakenduste ehitajad kasutavad vaikimisi TypeScripti.

Igapäevane võrdlus

Mõtle laoruumile märgistatud sektsioonidega. Igal sektsioonil on silt: „Ainult paletid“, „Külmutatud“, „Max 500 kg“. Kui kaup saabub, võrdleb kontrollija ukse juures kaupa sildiga. Külmutatud kala, mis on suunatud kuivkaupade sektsiooni, peatatakse ukse juures, mitte avastatakse nädal hiljem, kui see haisema hakkab.

TypeScript on see kontrollija ukse juures. Tüübid on sildid. Kontroll toimub enne, kui kaup — sinu kood — kasutusse läheb. Ja kui kõik on paigas, silte eemaldatakse: töötaval JavaScriptil ei ole tüüpe enam alles.

Kuidas TypeScript töötab

1. Sina (või AI) kirjutad .ts või .tsx faile — TypeScripti koodi koos tüübisiltidega.
2. Tüübikontrollija loeb koodi ja teatab vastuolud vigadena redaktoris või ehituses.
3. Ehitussamm eemaldab tüübid, tootes tavalise JavaScripti.
4. JavaScript käivitub brauseris või serveris (Node.js, Deno, Bun).

Oluline tagajärg: TypeScript kontrollib koodi, mille kirjutasid, mitte andmeid, mis jõuavad rakenduse töötamise ajal. Kui väline API saadab midagi ootamatut, ei näe TypeScript seda, kui sa ei lisa käitusaegset valideerimist.

Töönäide: broneerimisvorm

Oletame, et ehitad juuksurisalongi broneerimisrakendust. Siin on tüüp, mis kirjeldab broneeringut:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? tähendab valikulist
};

Ja funktsioon, mis arvutab ettemaksu:

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

Vaata nüüd, mida TypeScript püüab kinni.

Valesti kirjutatud väli.

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

TypeScript teatab, et prise ei ole teadaolev omadus ja price puudub. Tavalises JavaScriptis arvutataks vaikselt ettemaksuks NaN (mitte arv).

Vale liiki väärtus.

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

TypeScript teatab, et stringi ei saa kasutada kohas, kus oodatakse arvu. Ilma selleta töötab "40" * 0.2 juhuslikult, kuid "40" + 5 annab "405" — selline viga, mis ilmub arvel.

Teenust, mida ei ole.

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

TypeScript teatab, et "perm" ei ole lubatud teenuste hulgas. Kui salong hiljem lisab permid, lisad selle tüüpi ja TypeScript näitab iga koha, mis vajab uuendamist — hinnakirja, vormi, kalendri värve.

Mida see ei suuda. Kui broneerimisvorm saadab price: "40" brauserist serverisse, ei näe serveri TypeScript seda käitusajal. Seepärast valideerivad hästi ehitatud rakendused ka sissetulevaid andmeid, sageli valideerimisteegi abil, mis kontrollib kuju ja muudab selle korrektseks Booking-ks.

TypeScript vs JavaScript

Levinud mõisted selgitatud

Levinud vead ja väärarusaamad

• „TypeScript teeb koodi veavabaks.“ See püüab kinni andmete kuju vastuolud, mitte valet loogikat. 2% ettemaks 20% asemel läbib tüübikontrolli.
• „Tüübid kaitsevad mind halva sisendi eest.“ Tüübid kaovad käitusajal. Valideeri kasutajate, vormide ja API-de andmed.
• any kõikjal. Kui AI on kinni, võib ta haarata any või // @ts-ignore järele, et vead vaigistada. See peidab probleemid selle asemel, et neid lahendada.
• Tüübivigade ignoreerimine, sest eelvaade töötab. Mõned tööriistad käivitavad koodi ka tüübivigadega. Vead on endiselt pommid, mis ootavad.
• „TypeScript on aeglasem.“ Tüübid eemaldatakse enne käivitamist; käivitatav JavaScript on sisuliselt sama.
• „See on ainult suurtele meeskondadele.“ Ka üksikud ehitajad saavad kasu, eriti kui AI teeb enamiku muudatustest.

Mida paluda AI-ehitajalt

• „Kasuta TypeScripti koos range režiimiga.“
• „Defineeri jagatud tüübid meie peamiste kirjete jaoks — Customer, Booking, Invoice — ja kasuta neid nii esi- kui tagaosas.“
• „Ära kasuta any ega @ts-ignore, et vigadest mööda minna; lahenda aluseks olev probleem ja ütle, mis see oli.“
• „Valideeri kõik sissetulevad andmed serveris, mitte ainult tüüpidega.“
• „Käivita tüübikontrollija ja paranda kõik vead, enne kui ütled, et see on valmis.“
• „Kui nimetad välja ümber, uuenda kõiki kohti, mida TypeScript märgib.“
• „Selgita see tüübiviga lihtsas keeles.“

Enda AI genereeritud koodi kontrollimise kohta vaata kuidas AI genereeritud koodi üle vaadata ja kuidas AI-ehitatud rakendust siluda.

TypeScript Mythexis

Kui midagi konkreetset ei palu, alustab Mythex uusi projekte Vite + React + TypeScript + Tailwind komplektiga. Koodiredaktor sisaldab keeleteadlikkust — täiendusi, diagnostikat ja „mine definitsioonile“ funktsiooni TypeScripti ja JavaScripti jaoks, muude keelte seas —, nii et tüübivead on näha koodis, mitte ainult eelvaates. Redaktor on Free paketis ainult lugemiseks ja Prol täielikult muudetav. Esimeses päringus saad siiski paluda teistsugust seadistust; tehnoloogia valimist selgitav dokumentatsioon ütleb, kuidas, ja koodiredaktori dokumentatsioon kirjeldab, mida redaktor näitab.

Küsimused