Kas yra TypeScript? Paprastas vadovas ne programuotojams

TypeScript – tai JavaScript su tipais. Pridedate žymas, nurodančias, kokio tipo duomenys turi būti kiekvienoje reikšmėje – skaičius, tekstas, užsakymų sąrašas – o TypeScript prieš paleidžiant kodą patikrina, ar nėra neatitikimų. TypeScript svetainė jį apibūdina kaip „JavaScript su tipų sintaksė“; tipai pašalinami, kai kodas paverčiamas įprastu JavaScript, kuris veikia visur, kur veikia JavaScript.

Kodėl tai svarbu kuriant su AI

AI modeliai rašo kodą greitai, o greitai parašytas kodas turi klaidų: laukas customerName viename faile ir customer_name kitame, kaina perduodama kaip tekstas, o ne skaičius, funkcija iškviečiama be reikalingos reikšmės. Paprastame JavaScript daugelis tokių klaidų pasirodo tik tada, kai kas nors paspaudžia neteisingą mygtuką.

TypeScript daugelį jų sugauna anksčiau – kol kodas dar rašomas:

• AI gauna momentinį grįžtamąjį ryšį. Tipų klaidos nurodo tiksliai, kuri eilutė neteisinga, todėl agentas gali ją ištaisyti dar prieš tai, kai jūs ją pamatote.
• Pakeitimai saugesni. Pervadinus lauką, TypeScript pažymi kiekvieną vietą, kuri vis dar naudoja seną pavadinimą.
• Kodas pats save paaiškina. Tipai dokumentuoja, ko funkcija tikisi ir ką grąžina, o tai padeda jums, AI ir bet kuriam vėliau prie jo dirbsiančiam kūrėjui.
• Redaktoriai išmanesni. Automatinis pildymas ir „eiti į apibrėžimą“ veikia geriau, nes redaktorius žino, koks tipas yra kiekviena reikšmė.

Tai didelė priežastis, kodėl daugelis AI programėlių kūrimo įrankių pagal numatytuosius nustatymus naudoja TypeScript.

Kasdienė analogija

Pagalvokite apie sandėlį su pažymėtomis zonomis. Kiekviena zona turi ženklą: „Tik paletės“, „Šaldyta“, „Ne daugiau kaip 500 kg“. Atvykus pristatymui, prie durų tikrintojas palygina prekes su ženklu. Šaldytos žuvys, skirtos sausųjų prekių zonai, sustabdomos prie durų, o ne atrandamos savaitę vėliau, kai jau dvokia.

TypeScript yra tikrintojas prie durų. Tipai yra ženklai. Tikrinimas vyksta prieš prekes – jūsų kodą – patenkant į naudojimą. Ir kai viskas įdėta į vietas, ženklai nuimami: veikiančiame JavaScript jokių tipų nebelieka.

Kaip veikia TypeScript

1. Jūs (arba AI) rašote .ts ar .tsx failus – TypeScript su tipų žymomis.
2. Tipų tikrintuvas nuskaito kodą ir praneša apie neatitikimus kaip klaidas redaktoriuje ar kūrimo metu.
3. Kūrimo žingsnis pašalina tipus, sukurdamas paprastą JavaScript.
4. JavaScript veikia naršyklėje arba serveryje (Node.js, Deno, Bun).

Svarbi pasekmė: TypeScript tikrina kodą, kurį parašėte, o ne duomenis, kurie ateina programėlei veikiant. Jei išorinis API grąžina kažką netikėto, TypeScript to nemato, nebent pridedate patikrinimą veikimo metu.

Darbo pavyzdys: rezervacijos forma

Tarkime, kuriate kirpyklos rezervacijų programėlę. Štai tipas, aprašantis rezervaciją:

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

Ir funkcija, skaičiuojanti depozitą:

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

Dabar pažiūrėkite, ką TypeScript sugauna.

Lauko pavadinimas parašytas klaidingai.

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

TypeScript praneša, kad prise nėra žinoma savybė, o price trūksta. Paprastame JavaScript tai tyliai apskaičiuotų depozitą NaN (ne skaičius).

Neteisingo tipo reikšmė.

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

TypeScript praneša, kad eilutės negalima naudoti ten, kur tikimasi skaičiaus. Be jo "40" * 0.2 atsitiktinai veiktų, bet "40" + 5 duotų "405" – tokia klaida pasirodo sąskaitoje faktūroje.

Paslauga, kurios nėra.

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

TypeScript praneša, kad "perm" nėra vienas iš leidžiamų paslaugų. Kai salonas vėliau prideda permus, jūs įtraukiate juos į tipą, o TypeScript parodo kiekvieną vietą, kurią reikia atnaujinti – kainų sąrašą, formą, kalendoriaus spalvas.

Ko jis negali sugauti. Jei rezervacijos forma siunčia price: "40" iš naršyklės į serverį, serverio TypeScript to veikimo metu nemato. Todėl gerai sukurtos programėlės taip pat patikrina gaunamus duomenis, dažnai naudodamos patikrinimo biblioteką, kuri tikrina formą ir paverčia ją tinkamu Booking.

TypeScript ir JavaScript

Dažniausi terminai paaiškinti

Dažnos klaidos ir klaidingi įsitikinimai

• „TypeScript padaro kodą be klaidų.“ Jis sugauna duomenų formos neatitikimus, o ne neteisingą logiką. 2 % depozitas vietoj 20 % praeis tipų tikrinimą.
• „Tipai apsaugo nuo blogų įvesčių.“ Tipai dingsta veikimo metu. Tikrinkite duomenis iš vartotojų, formų ir API.
• any visur. Kai AI užstringa, jis gali griebtis any ar // @ts-ignore, kad nutildytų klaidas. Tai slepia problemas, o ne jas sprendžia.
• Tipų klaidų ignoravimas, nes peržiūra veikia. Kai kurie įrankiai vis tiek paleidžia kodą su tipų klaidomis. Tos klaidos vis tiek yra laukiančios kaip problema.
• „TypeScript lėtesnis.“ Tipai pašalinami prieš paleidžiant; vykdomas JavaScript iš esmės toks pats.
• „Tai tik didelėms komandoms.“ Vieniši kūrėjai taip pat naudą gauna, ypač kai AI atlieka didžiąją dalį pakeitimų.

Ko paprašyti AI kūrimo įrankio

• „Naudok TypeScript su įjungtu griežtu režimu.“
• „Apibrėžk bendrus tipus pagrindiniams mūsų įrašams – Customer, Booking, Invoice – ir naudok juos tiek priekinėje, tiek galinėje dalyje.“
• „Nenaudok any ar @ts-ignore, kad įveiktum klaidas; ištaisyk pagrindinę problemą ir pasakyk man, kas tai buvo.“
• „Patikrink visus gaunamus duomenis serveryje, ne tik tipais.“
• „Paleisk tipų tikrintuvą ir ištaisyk visas klaidas, prieš man sakydamas, kad viskas baigta.“
• „Pervadinus lauką, atnaujink kiekvieną vietą, kurią TypeScript pažymi.“
• „Paaiškink šią tipo klaidą paprasta kalba.“

Norėdami daugiau apie AI sugeneruoto kodo tikrinimą, žr. kaip peržiūrėti AI sugeneruotą kodą ir kaip ištaisyti AI sukurtos programėlės klaidas.

TypeScript Mythex

Nieko konkretaus neprašius, Mythex naujus projektus pradeda su Vite + React + TypeScript + Tailwind. Kodo redaktoriuje yra kalbos palaikymas – TypeScript ir JavaScript (be kitų kalbų) užbaigimai, diagnostika ir eiti į apibrėžimą – todėl tipų klaidos matomos kode, o ne tik peržiūroje. Redaktorius Free plane tik skaitomas, Pro plane visiškai redaguojamas. Pirmoje užklausoje vis tiek galite paprašyti kitokios konfigūracijos; dokumentacijos puslapis apie technologijų parinkimą paaiškina, kaip tai padaryti, o kodo redaktoriaus dokumentacija aprašo, ką jis rodo.

Klausimai