Wat is TypeScript? Een heldere gids voor niet-developers

TypeScript is JavaScript met types. Je voegt labels toe die aangeven welk soort data elke waarde moet zijn: een getal, een tekst, een lijst met bestellingen. TypeScript controleert je code op afwijkingen voordat die ooit draait. De TypeScript-site omschrijft het als "JavaScript met syntaxis voor types"; de types worden verwijderd wanneer de code wordt omgezet naar gewoon JavaScript, dat overal draait waar JavaScript draait.

Waarom het ertoe doet als je met AI bouwt

AI-modellen schrijven snel code, en snelle code bevat fouten: een veld dat in het ene bestand customerName heet en in een ander customer_name, een prijs die als tekst in plaats van als getal wordt doorgegeven, een functie die wordt aangeroepen met een ontbrekende waarde. In gewoon JavaScript komen veel van die fouten pas aan het licht als iemand op de verkeerde knop klikt.

TypeScript vangt er veel eerder, terwijl de code wordt geschreven:

• De AI krijgt direct feedback. Typefouten wijzen de precieze verkeerde regel aan, zodat de agent die kan oplossen voordat jij het ziet.
• Wijzigingen zijn veiliger. Hernoem je een veld, dan markeert TypeScript elke plek die nog de oude naam gebruikt.
• Code legt zichzelf uit. Types documenteren wat een functie verwacht en teruggeeft, wat helpt, jou, de AI en elke developer die er later aan werkt.
• Editors worden slimmer. Automatisch aanvullen en "ga naar definitie" werken beter omdat de editor weet wat elke waarde is.

Dat is een belangrijke reden waarom veel AI-app-builders standaard TypeScript gebruiken.

Een alledaagse vergelijking

Denk aan een magazijn voor verzending met gelabelde vakken. Elk vak heeft een bord: "Alleen pallets", "Gekoeld", "Max. 500 kg". Wanneer er een levering binnenkomt, vergelijkt een controleur bij de deur de goederen met het bord. Diepvriesvis die naar het vak voor droge waren gaat, wordt bij de deur tegengehouden, en niet pas een week later ontdekt als het begint te stinken.

TypeScript is de controleur bij de deur. De types zijn de borden. De controle gebeurt voordat de goederen (je code) in gebruik worden genomen. En als alles op zijn plek ligt, worden de borden weggehaald: het draaiende JavaScript bevat geen types meer.

Hoe TypeScript werkt

1. Jij (of de AI) schrijft .ts- of .tsx-bestanden: TypeScript, met typelabels.
2. De typecontrole leest de code en meldt afwijkingen als fouten in de editor of de build.
3. Een buildstap verwijdert de types, zodat gewoon JavaScript overblijft.
4. Het JavaScript draait in de browser of op een server (Node.js, Deno, Bun).

Een belangrijk gevolg: TypeScript controleert de code die je hebt geschreven, niet de data die binnenkomt terwijl de app draait. Als een externe API iets onverwachts teruggeeft, ziet TypeScript dat niet tenzij je validatie tijdens het draaien toevoegt.

Een uitgewerkt voorbeeld: een boekingsformulier

Stel dat je een boekingsapp voor een kapsalon bouwt. Hier is een type dat een boeking beschrijft:

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

En een functie die een aanbetaling berekent:

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

Kijk nu eens wat TypeScript vangt.

Een verkeerd gespeld veld.

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

TypeScript meldt dat prise geen bekende eigenschap is en dat price ontbreekt. In gewoon JavaScript zou dit stilletjes een aanbetaling van NaN (geen getal) berekenen.

Het verkeerde soort waarde.

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

TypeScript meldt dat een tekst niet gebruikt kan worden waar een getal wordt verwacht. Zonder die controle werkt "40" * 0.2 toevallig wel, maar geeft "40" + 5 de waarde "405": het soort fout dat op een factuur terechtkomt.

Een dienst die niet bestaat.

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

TypeScript meldt dat "perm" niet een van de toegestane diensten is. Als de salon later permanents toevoegt, voeg je die toe aan het type, en TypeScript toont elke plek die moet worden bijgewerkt: de prijslijst, het formulier, de kleuren in de agenda.

Wat het niet kan vangen. Als het boekingsformulier price: "40" vanuit de browser naar de server stuurt, ziet TypeScript op de server dat tijdens het draaien niet. Daarom valideren goed gebouwde apps ook binnenkomende data, vaak met een validatiebibliotheek die de vorm controleert en er een correcte Booking van maakt.

TypeScript vs JavaScript

Veelgebruikte termen uitgelegd

Veelgemaakte fouten en misverstanden

• "TypeScript maakt code foutloos." Het vangt afwijkingen in de vorm van data, niet in de logica. Een aanbetaling van 2% in plaats van 20% past gewoon in het type.
• "Types beschermen me tegen slechte invoer." Types verdwijnen tijdens het draaien. Valideer data van gebruikers, formulieren en API's.
• any overal. Wanneer een AI vastloopt, kan het naar any of // @ts-ignore grijpen om fouten te onderdrukken. Dat verbergt problemen in plaats van ze op te lossen.
• Typefouten negeren omdat de preview werkt. Sommige tools draaien code met typefouten toch. De fouten zijn nog steeds bugs die wachten om op te treden.
• "TypeScript is trager." De types worden verwijderd voordat het draait; het JavaScript dat draait is in essentie hetzelfde.
• "Het is alleen voor grote teams." Solo-bouwers profiteren ook, zeker wanneer een AI het grootste deel van de wijzigingen maakt.

Wat je aan je AI-builder kunt vragen

• "Gebruik TypeScript met strict mode aan."
• "Definieer gedeelde types voor onze belangrijkste records (Customer, Booking, Invoice) en gebruik ze zowel in de frontend als in de backend."
• "Gebruik geen any of @ts-ignore om langs fouten te komen; los het onderliggende probleem op en vertel me wat het was."
• "Valideer alle binnenkomende data op de server, niet alleen met types."
• "Draai de typecontrole en los elke fout op voordat je zegt dat het klaar is."
• "Wanneer je een veld hernoemt, werk dan elke plek bij die TypeScript markeert."
• "Leg deze typefout uit in gewoon Nederlands."

Voor meer over het controleren van wat de AI heeft gemaakt, zie hoe je AI-gegenereerde code reviewt en hoe je een met AI gebouwde app debugt.

TypeScript in Mythex

Als je niets specifieks vraagt, start Mythex nieuwe projecten op Vite + React + TypeScript + Tailwind. De code-editor heeft taalintelligentie (aanvullingen, diagnoses en ga-naar-definitie voor TypeScript en JavaScript, naast andere talen), zodat typefouten zichtbaar zijn in de code en niet alleen in de preview. De editor is alleen-lezen op Free en volledig bewerkbaar op Pro. Je kunt in je eerste prompt nog steeds om een andere opzet vragen; de documentatiepagina over hoe de techniek wordt gekozen legt uit hoe, en de documentatie van de code-editor behandelt wat de editor toont.

Veelgestelde vragen