TypeScript for nybegynnere — fra JavaScript til type-sikker kode

Hva er TypeScript og hvorfor bruke det?

TypeScript er et programmeringsspråk utviklet av Microsoft som bygger på JavaScript ved å legge til statisk typing. Alt gyldig JavaScript-kode er også gyldig TypeScript — TypeScript er et superset av JavaScript. TypeScript-kode kompileres (transpileres) til vanlig JavaScript og kan kjøre i alle nettlesere og på Node.js uten endringer.

Hvorfor TypeScript? Den viktigste fordelen er at feil oppdages ved kompileringstid — i editoren din — fremfor i produksjon. Når du prøver å sende en string inn i en funksjon som forventer et tall, roper TypeScript ifra umiddelbart. Autocompletjon i VS Code blir dramatisk bedre fordi editoren vet hvilke egenskaper og metoder objektene dine har. For store kodebaser og team er TypeScript nær obligatorisk for å holde koden vedlikeholdbar over tid.

Grunnleggende typer — byggesteinene i TypeScript

TypeScript har innebygde primitive typer: number, string, boolean, null, undefined, symbol og bigint. Du kan annotere variabler, funksjonparametere og returverdier med disse typene. TypeScript kan også utlede typer automatisk (type inference) — du trenger ikke alltid å skrive typen eksplisitt.

Eksempler på grunnleggende typeannoteringer: let alder: number = 28; — let navn: string = "Kari"; — let aktiv: boolean = true. Funksjoner: function leggSammen(a: number, b: number): number { return a + b; }. TypeScript gir feilmelding hvis du prøver å kalle leggSammen("hei", 2).

Arrays skrives som number[] eller Array<number>. Tuples er arrays med fast lengde og typer per posisjon: [string, number] — f.eks. ["Oslo", 691000]. any-typen skrur av TypeScript-sjekking for en variabel — bruk den sparsomt, da den negerer TypeScripts fordeler. unknown er tryggere: du må sjekke typen eksplisitt før du bruker verdien.

Interfaces og Type Aliases — slik strukturerer du data

Interface er TypeScript sin måte å beskrive formen til et objekt. Du definerer hvilke felter objektet skal ha og hvilken type hvert felt har. Eksempel: interface Bruker { id: number; navn: string; epost: string; aktiv: boolean; }. Alle objekter som tilfredsstiller denne formen er gyldige Bruker-objekter.

Type alias er en annen syntaks for å definere typer: type Bruker = { id: number; navn: string; }. For enkle objekter er interface og type alias nesten identiske. Viktige forskjeller: interfaces kan utvides (extends) og slås sammen (declaration merging), mens type aliases er mer fleksible og kan representere union-typer, intersection-typer og primitive aliaser.

Optional fields markeres med spørsmålstegn: interface Produkt { id: number; navn: string; beskrivelse?: string; }. Readonly-felter som ikke kan endres: interface Konfig { readonly apiUrl: string; }. En god tommelfingerregel: bruk interface for objekter og klassekontrakter, type for unions, tuples og andre sammensatte typer.

Generics — gjenbrukbar type-sikker kode

Generics er TypeScripts måte å skrive gjenbrukbar kode som fungerer med mange typer uten å miste type-sikkerhet. Tenk på generics som type-parametere — akkurat som en funksjon tar verdiparametere, tar en generisk funksjon type-parametere.

Eksempel: function sisteElement<T>(arr: T[]): T { return arr[arr.length - 1]; }. Her er T en type-parameter. Kall sisteElement([1, 2, 3]) gir number. Kall sisteElement(["a", "b"]) gir string. Funksjonen er gjenbrukbar og type-sikker. Uten generics måtte du enten skrive én funksjon per type, eller bruke any og miste type-sjekking.

Generics brukes mye i biblioteker: React.useState<number>(0) spesifiserer at staten er et tall. Promise<string> beskriver et løfte som returnerer en streng. Array<T>, Map<K, V> og Set<T> er alle innebygde generiske typer. Constraint på generics: function hentNavn<T extends { navn: string }>(obj: T): string { return obj.navn; } — T må ha et navn-felt.

TypeScript i praksis — med React og Node.js

For React-prosjekter: bruk create-react-app med TypeScript-template (npx create-react-app my-app --template typescript) eller Vite (npm create vite@latest my-app -- --template react-ts). Komponenter kan skrives som: interface Props { tittel: string; antall: number; onClick: () => void; }. const MinKomponent: React.FC<Props> = ({ tittel, antall, onClick }) => { ... }.

For Node.js: installer TypeScript lokalt (npm install typescript @types/node --save-dev), lag tsconfig.json (npx tsc --init), og kompiler med npx tsc. For Express: npm install @types/express gir full typestøtte for req, res og middleware. ts-node lar deg kjøre TypeScript direkte uten manuell kompilering — nyttig under utvikling.

tsconfig.json er TypeScript sin konfigurasjonsfil og er svært viktig. De viktigste innstillingene: strict: true (anbefalt — aktiverer alle strenge sjekker), target (hvilken JavaScript-versjon du kompilerer til), module (CommonJS for Node, ESM for moderne nettleser/bundler), paths (alias for import-stier, f.eks. @/ for src/).

Union-typer, type guards og utility types

Union-typer lar en variabel være av én av flere typer: type Status = "aktiv" | "inaktiv" | "slettet". Dette er mye sikrere enn å bruke string, da TypeScript vet nøyaktig hvilke verdier som er gyldige. Discriminated unions er et kraftig mønster: type Respons = { status: "ok"; data: string } | { status: "feil"; melding: string }. Du kan switch på status-feltet og TypeScript vet hvilke felter som er tilgjengelige i hvert tilfelle.

Type guards er funksjoner som innsnevrer typen i et kodesteg: function erString(val: unknown): val is string { return typeof val === "string"; }. Utility types er innebygde generiske hjelpeverktøy: Partial<T> gjør alle felter valgfrie, Required<T> gjør alle felter obligatoriske, Readonly<T> gjør alle felter skrivebeskyttet, Pick<T, K> velger ut spesifikke felter, og Omit<T, K> ekskluderer felter.

Record<K, V> er nyttig for å definere objekter som oppslags-tabeller: type Landkoder = Record<string, string>. ReturnType<typeof minFunksjon> gir deg typen som en funksjon returnerer, uten å måtte skrive den manuelt. Disse utility types reduserer kode-duplisering og holder typedefinisjonene i sync med kilden.

Kom i gang med TypeScript i dag

Kom i gang steg for steg: Start med å legge til TypeScript i et eksisterende JavaScript-prosjekt (npm install typescript --save-dev, npx tsc --init). Rename .js-filer til .ts én om gangen. Begynn med strict: false og aktiver gradvis strengere sjekker etter hvert som du blir komfortabel.

Utmerkede læringsressurser: TypeScript-dokumentasjonen på typescriptlang.org er fremragende — spesielt "TypeScript in 5 minutes" for nybegynnere. Matt Pococks kurs "Total TypeScript" er anerkjent som det beste for norske utviklere som vil gå dypt. Zen of Python-prinsippene gjelder for TypeScript: eksplisitt er bedre enn implisitt. Unngå any, skriv ut typene dine og la kompilatoren hjelpe deg.

"TypeScript har reddet oss fra utallige produksjonsfeil. Det tar noen uker å lære, men betaler seg tilbake tusenfold i et team over ett år."