Hva er TypeScript? En enkel guide for ikke-utviklere

TypeScript er JavaScript med typer. Du legger til merkelapper som sier hvilken type data hver verdi skal være – et tall, en tekst, en liste med bestillinger – og TypeScript sjekker koden for avvik før den noen gang kjøres. TypeScript-nettstedet beskriver det som «JavaScript med syntaks for typer». Typene fjernes når koden gjøres om til vanlig JavaScript, som deretter kjører overalt JavaScript kjører.

Hvorfor det betyr noe når du bygger med AI

AI-modeller skriver kode raskt, og raskt skrevet kode har feil: et felt kalt customerName i én fil og customer_name i en annen, en pris sendt som tekst i stedet for et tall, en funksjon kalt med en manglende verdi. I vanlig JavaScript viser mange av disse feilene seg først når noen klikker på feil knapp.

TypeScript fanger mange av dem tidligere, mens koden skrives:

• AI-en får umiddelbar tilbakemelding. Typefeil peker på den nøyaktige linjen som er feil, så agenten kan rette den før du ser den.
• Endringer er tryggere. Gi et felt nytt navn, og TypeScript flagger hvert sted som fortsatt bruker det gamle navnet.
• Koden forklarer seg selv. Typer dokumenterer hva en funksjon forventer og returnerer, noe som hjelper deg, AI-en og alle utviklere som jobber med den senere.
• Editorene blir smartere. Autofullføring og «gå til definisjon» fungerer bedre fordi editoren vet hva hver verdi er.

Dette er en viktig grunn til at mange AI-appbyggere bruker TypeScript som standard.

En hverdagslig sammenligning

Tenk på et lager med merkede rom. Hvert rom har en skilt: «Kun paller», «Kjølt», «Maks 500 kg». Når en leveranse kommer, sammenligner en kontrollør i døren varene med skiltet. Frossen fisk på vei til tørrvarerommet stoppes i døren, og oppdages ikke en uke senere når den lukter.

TypeScript er kontrolløren i døren. Typene er skiltene. Kontrollen skjer før varene – koden din – tas i bruk. Og når alt står på plass, fjernes skiltene: det kjørende JavaScriptet har ingen typer igjen.

Slik fungerer TypeScript

1. Du (eller AI-en) skriver .ts- eller .tsx-filer – TypeScript, med typemerkelapper.
2. Typesjekkeren leser koden og rapporterer avvik som feil i editoren eller ved bygging.
3. Et byggetrinn fjerner typene, og gir vanlig JavaScript.
4. JavaScriptet kjører i nettleseren eller på en server (Node.js, Deno, Bun).

En viktig konsekvens: TypeScript sjekker koden du skrev, ikke dataene som kommer inn mens appen kjører. Hvis et eksternt API sender tilbake noe uventet, kan ikke TypeScript se det med mindre du legger til validering under kjøring.

Et praktisk eksempel: et bookingskjema

Anta at du bygger en bookingapp for en frisørsalong. Her er en type som beskriver en booking:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? betyr at feltet er valgfritt
};

Og en funksjon som regner ut et depositum:

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

Se nå hva TypeScript fanger.

Et feilstavet felt.

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

TypeScript rapporterer at prise ikke er en kjent egenskap, og at price mangler. I vanlig JavaScript ville dette stille beregnet et depositum på NaN (ikke et tall).

Feil type verdi.

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

TypeScript rapporterer at en tekst ikke kan brukes der et tall forventes. Uten det fungerer "40" * 0.2 tilfeldigvis, men "40" + 5 gir "405" – den typen feil som dukker opp på en faktura.

En tjeneste som ikke finnes.

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

TypeScript rapporterer at "perm" ikke er en av de tillatte tjenestene. Når salongen senere legger til permanent, legger du det til i typen, og TypeScript viser hvert sted som må oppdateres – prislisten, skjemaet, kalenderfargene.

Hva det ikke kan fange. Hvis bookingskjemaet sender price: "40" fra nettleseren til serveren, ser ikke TypeScript på serveren det under kjøring. Derfor validerer velbygde apper også innkommende data, ofte med et valideringsbibliotek som sjekker strukturen og gjør den om til en riktig Booking.

TypeScript kontra JavaScript

Vanlige begreper forklart

Vanlige feil og misforståelser

• «TypeScript gjør koden feilfri.» Det fanger avvik i datastrukturen, ikke feil logikk. Et depositum på 2 % i stedet for 20 % passerer typesjekken.
• «Typer beskytter meg mot dårlig input.» Typer forsvinner under kjøring. Valider data fra brukere, skjemaer og API-er.
• any overalt. Når en AI står fast, kan den ta i bruk any eller // @ts-ignore for å dempe feil. Det skjuler problemer i stedet for å løse dem.
• Å ignorere typefeil fordi forhåndsvisningen fungerer. Noen verktøy kjører fortsatt kode med typefeil. Feilene er fortsatt feil som venter på å skje.
• «TypeScript er tregere.» Typene fjernes før kjøring; JavaScriptet som kjøres er i praksis det samme.
• «Det er bare for store team.» Soloutviklere har også nytte av det, særlig når en AI gjør de fleste endringene.

Hva du bør be AI-byggeren om

• «Bruk TypeScript med streng modus på.»
• «Definer felles typer for de viktigste postene våre – Customer, Booking, Invoice – og bruk dem både i frontend og backend.»
• «Ikke bruk any eller @ts-ignore for å komme forbi feil; løs det underliggende problemet og fortell meg hva det var.»
• «Valider all innkommende data på serveren, ikke bare med typer.»
• «Kjør typesjekkeren og rett alle feil før du sier at det er ferdig.»
• «Når du gir et felt nytt navn, oppdater hvert sted TypeScript flagger.»
• «Forklar denne typefeilen på vanlig norsk.»

For mer om hvordan du kontrollerer det AI-en produserte, se slik gjennomgår du AI-generert kode og slik feilsøker du en AI-bygd app.

TypeScript i Mythex

Når du ikke ber om noe spesielt, starter Mythex nye prosjekter på Vite + React + TypeScript + Tailwind. Kodeeditoren har språkstøtte – fullføring, diagnostikk og gå-til-definisjon for TypeScript og JavaScript, blant andre språk – så typefeil er synlige i koden, ikke bare i forhåndsvisningen. Editoren er skrivebeskyttet på Free og fullt redigerbar på Pro. Du kan fortsatt be om et annet oppsett i første prompt; dokumentasjonssiden om hvordan teknologien velges forklarer hvordan, og dokumentasjonen for kodeeditoren dekker hva editoren viser.

Spørsmål