Mi az a TypeScript? Érthető útmutató nem fejlesztőknek

A TypeScript típusokkal kiegészített JavaScript. Címkéket adsz hozzá, amelyek megmondják, milyen fajta adatnak kell lennie az egyes értékeknek — szám, szöveg, rendelések listája —, a TypeScript pedig a kód futtatása előtt ellenőrzi az eltéréseket. A TypeScript honlapja úgy írja le, mint „JavaScriptet típusok szintaxisával”; a típusokat a kód közönséges JavaScriptté alakításakor eltávolítják, amely aztán mindenhol fut, ahol a JavaScript.

Miért fontos, ha AI-val építesz

Az AI-modellek gyorsan írnak kódot, a gyors kódban pedig hibák vannak: egy customerName nevű mező az egyik fájlban, customer_name a másikban, egy ár szövegként átadva szám helyett, egy függvény hiányzó értékkel hívva. Sima JavaScriptben sok ilyen hiba csak akkor derül ki, amikor valaki a rossz gombra kattint.

A TypeScript sokat közülük már korábban elkapja, a kód írása közben:

• Az AI azonnali visszajelzést kap. A típushibák pontosan megmutatják a hibás sort, így az ügynök javíthatja, mielőtt te látnád.
• A módosítások biztonságosabbak. Átnevezel egy mezőt, a TypeScript megjelöl minden helyet, ahol még a régi nevet használják.
• A kód magát magyarázza. A típusok dokumentálják, mit vár és mit ad vissza egy függvény, ez segít neked, az AI-nak és bárkinek, aki később dolgozik rajta.
• Az editorok okosabbak lesznek. Az automatikus kiegészítés és az „ugrás a definícióra” jobban működik, mert az editor tudja, mi az egyes értékek.

Ezért alapértelmezés szerint sok AI-appépítő a TypeScriptet használja.

Mindennapi hasonlat

Gondolj egy raktárra, címkézett rekeszekkel. Minden rekeszen van egy tábla: „Csak raklap”, „Hűtött”, „Max. 500 kg”. Amikor érkezik a szállítmány, az ajtónál egy ellenőr összeveti az árut a táblával. A fagyasztott halat, amely a száraz áruk rekeszébe tartana, az ajtónál megállítják, nem egy héttel később, amikor már bűzlik.

A TypeScript az ajtónál álló ellenőr. A típusok a táblák. Az ellenőrzés azelőtt történik, hogy az árut — a kódodat — használatba veszik. Ha minden a helyén van, a táblákat leveszik: a futó JavaScriptben már nincs típus.

Hogyan működik a TypeScript

1. Te (vagy az AI) .ts vagy .tsx fájlokat írsz — TypeScriptet, típuscímkékkel.
2. A típusellenőrző beolvassa a kódot, és az eltéréseket hibaként jelzi az editorban vagy a buildben.
3. Egy build-lépés eltávolítja a típusokat, és sima JavaScriptet állít elő.
4. A JavaScript fut a böngészőben vagy szerveren (Node.js, Deno, Bun).

Fontos következmény: a TypeScript a te írt kódodat ellenőrzi, nem a futás közben érkező adatokat. Ha egy külső API valami váratlant küld vissza, a TypeScript nem látja, hacsak nem adsz hozzá futásidejű validációt.

Példa: egy foglalási űrlap

Tegyük fel, hogy fodrászszalonnak építesz foglalási appot. Így írhatsz le egy foglalást típussal:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // a ? jelentése: opcionális
};

És egy függvény, amely kiszámolja a foglalót:

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

Nézd meg, mit fog meg a TypeScript.

Elírt mező.

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

A TypeScript jelzi, hogy a prise nem ismert tulajdonság, és a price hiányzik. Sima JavaScriptben csendben NaN (nem szám) foglalót számolna.

Rossz fajta érték.

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

A TypeScript jelzi, hogy szöveg nem használható ott, ahol számot várnak. Enélkül a "40" * 0.2 véletlenül működik, de a "40" + 5 értéke "405" lesz — az a fajta hiba, amely egy számlán jelenik meg.

Nem létező szolgáltatás.

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

A TypeScript jelzi, hogy a "perm" nem az engedélyezett szolgáltatások egyike. Amikor a szalon később bevezeti a permanentet, hozzáadod a típushoz, és a TypeScript megmutatja az összes helyet, ahol frissíteni kell: az árlistát, az űrlapot, a naptár színeit.

Amit nem fog meg. Ha a foglalási űrlap price: "40" értéket küld a böngészőből a szervernek, a szerveren futó TypeScript ezt futás közben nem látja. Ezért a jól felépített appok a beérkező adatokat is validálják, gyakran egy validációs könyvtárral, amely ellenőrzi az alakot, és valódi Booking objektummá alakítja.

TypeScript vs JavaScript

Fontos fogalmak

Gyakori hibák és tévhitek

• „A TypeScript hibamentessé teszi a kódot.” Az adatalakban lévő eltéréseket fogja meg, a rossz logikát nem. Egy 20% helyett 2%-os előleg típusellenőrzésen simán átmegy.
• „A típusok megvédenek a rossz bemenettől.” A típusok futás közben eltűnnek. Validáld a felhasználóktól, űrlapokról és API-kból érkező adatokat.
• any mindenhol. Amikor egy AI elakad, előfordulhat, hogy any-hez vagy // @ts-ignore-hoz nyúl, hogy elnémítsa a hibákat. Ez elrejti a problémát, nem megoldja.
• A típushibák figyelmen kívül hagyása, mert az előnézet működik. Egyes eszközök típushibás kóddal is futtatnak. A hibák attól még bugok, amelyek várnak arra, hogy előjöjjenek.
• „A TypeScript lassabb.” A típusokat futtatás előtt eltávolítják; a futó JavaScript lényegében ugyanaz.
• „Csak nagy csapatoknak való.” Az egyedül építők is profitálnak belőle, különösen, ha az AI végzi a legtöbb szerkesztést.

Mit kérj az AI-építődtől

• „Használj TypeScriptet szigorú (strict) módban.”
• „Definiálj közös típusokat a fő rekordjainkhoz — Customer, Booking, Invoice — és használd őket a frontenden és a backenden is.”
• „Ne használj any-t vagy @ts-ignore-t a hibák megkerülésére; javítsd a mögöttes problémát, és mondd meg, mi volt.”
• „A szerveren minden bejövő adatot validálj, ne csak típusokkal.”
• „Futtasd a típusellenőrzőt, és javíts ki minden hibát, mielőtt készként jelented.”
• „Ha átnevezel egy mezőt, frissíts minden helyet, amelyet a TypeScript jelez.”
• „Magyarázd el ezt a típushibát egyszerű szavakkal.”

Az AI által készített kód ellenőrzéséhez lásd: hogyan nézd át az AI által generált kódot és hogyan hibakeresd az AI-val épített appot.

TypeScript a Mythexben

Ha nem kérsz semmi konkrétat, a Mythex új projektjeit Vite + React + TypeScript + Tailwind alapokra indítja. A kódszerkesztő nyelvi támogatást ad — kiegészítéseket, diagnosztikát és ugrást a definícióra TypeScripthez és JavaScripthez, többek között más nyelvek mellett —, így a típushibák a kódban láthatók, nem csak az előnézetben. A szerkesztő Free csomagon csak olvasható, Pro csomagon teljesen szerkeszthető. Az első promptban továbbra is kérhetsz más felállást; a technológiák kiválasztásáról szóló dokumentációs oldal elmagyarázza, hogyan, a kódszerkesztő dokumentációja pedig azt, mit mutat a szerkesztő.

Kérdések