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. Ifølge TypeScript-dokumentasjonen er eksisterende, fungerende JavaScript-kode også TypeScript-kode, og TypeScript legger typesystemet som et ekstra lag oppå. Koden typesjekkes av kompilatoren tsc og blir til vanlig JavaScript som kan kjøre i nettlesere og på Node.js. Kildekoden ligger åpent på GitHub.

Hvorfor TypeScript? Den viktigste fordelen er at mange feil oppdages før koden kjøres, i editoren din, fremfor i produksjon. Prøver du å sende en string inn i en funksjon som forventer et tall, gir TypeScript en feilmelding med en gang. Autofullføring i VS Code blir bedre fordi editoren vet hvilke egenskaper og metoder objektene dine har. For store kodebaser og team gjør typene koden enklere å vedlikeholde over tid.

Grunnleggende typer — byggesteinene i TypeScript

De tre vanligste primitive typene er string, number og boolean. I tillegg finnes blant annet null, undefined, symbol og bigint. Du kan annotere variabler, funksjonsparametere og returverdier med typene. TypeScript kan også utlede typer automatisk (type inference): skriver du let navn = "Kari";, utleder TypeScript at navn er en string, så du trenger ikke alltid å skrive typen eksplisitt.

Eksempler på 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. ["Kari", 28]. any-typen skrur av typesjekkingen for en verdi, så bruk den sparsomt. unknown er tryggere: du må innsnevre typen før du bruker verdien.

Interfaces og Type Aliases — slik strukturerer du data

Interface beskriver 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 fungerer interface og type alias nesten likt. Ifølge håndboken er den viktigste forskjellen at en type ikke kan åpnes på nytt for å legge til felter, mens et interface alltid kan utvides. Interfaces utvides med extends, mens type aliases bruker intersection (&). Type aliases kan i tillegg gi navn til union-typer og primitive typer.

Valgfrie felter markeres med spørsmålstegn: interface Produkt { id: number; navn: string; beskrivelse?: string; }. Readonly-felter kan ikke endres etter at objektet er opprettet: interface Konfig { readonly apiUrl: string; }. En vanlig tommelfingerregel: bruk interface for objekter og type for unions, tuples og andre sammensatte typer.

Generics — gjenbrukbar type-sikker kode

Generics lar deg skrive gjenbrukbar kode som fungerer med mange typer uten å miste typesikkerhet (håndboken om generics). 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, og sisteElement(["a", "b"]) gir string. Uten generics måtte du enten skrive én funksjon per type, eller bruke any og miste typesjekkingen.

Generics brukes mye i biblioteker: useState<number>(0) i React spesifiserer at staten er et tall (react.dev). Promise<string> beskriver et løfte som gir en streng. Array<T>, Map<K, V> og Set<T> er innebygde generiske typer. Du kan også sette krav til type-parameteren med extends: 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: React-dokumentasjonen viser at du legger til typene i et eksisterende prosjekt med npm install --save-dev @types/react @types/react-dom, og at filer med JSX må ha filendelsen .tsx (react.dev). For nye prosjekter gir Vite ferdige maler: npm create vite@latest my-app -- --template react-ts. Create React App er avviklet for nye prosjekter (React-bloggen). En komponent med props kan skrives slik: interface Props { tittel: string; antall: number; onClick: () => void; } og function MinKomponent({ tittel, antall, onClick }: Props) { ... }.

For Node.js: installer TypeScript lokalt i prosjektet med npm install -D typescript, kjør npx tsc --init for å lage tsconfig.json, og kompiler med npx tsc. Dette er også installasjonsmåten Microsoft viser i kunngjøringen av TypeScript 7.0. I TypeScript 7 er types satt til en tom liste som standard, så vil du ha Node-typene må du installere @types/node og skrive "types": ["node"] i tsconfig.json. Node.js kan dessuten kjøre .ts-filer direkte ved å fjerne typeannotasjonene (type stripping), som er stabilt fra v24.12.0 og v25.2.0. Det gjør ingen typesjekking, så du kjører fortsatt tsc for det, og enums støttes ikke (Node.js-dokumentasjonen).

tsconfig.json er TypeScripts konfigurasjonsfil. De viktigste innstillingene er strict (strenge sjekker, slått på som standard fra TypeScript 7), target (hvilken JavaScript-versjon du kompilerer til), module (hvilket modulsystem som brukes) og paths (alias for import-stier).

Union-typer, type guards og utility types

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

Type guards innsnevrer typen i et kodesteg. Egne type guards skrives med type predicates: function erString(val: unknown): val is string { return typeof val === "string"; }. Utility types er innebygde generiske hjelpere: 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 felter, og Omit<T, K> fjerner felter.

Record<K, V> er nyttig for oppslagstabeller: type Landkoder = Record<string, string>. ReturnType<typeof minFunksjon> gir deg typen en funksjon returnerer, uten at du må skrive den manuelt. Utility types reduserer duplisering og holder typedefinisjonene i synk med kilden.

Kom i gang med TypeScript i dag

Kom i gang steg for steg: legg TypeScript til i et eksisterende JavaScript-prosjekt med npm install -D typescript og npx tsc --init. Gi .js-filene filendelsen .ts én om gangen. Fra og med TypeScript 7 er strict slått på som standard (kunngjøringen av TypeScript 7.0). Når du flytter et eldre prosjekt over, kan du slå av enkelte sjekker midlertidig i tsconfig.json og skru dem på igjen etter hvert.

Et godt sted å begynne er TypeScript-dokumentasjonen på typescriptlang.org, spesielt veiledningen «TypeScript for JavaScript Programmers». Unngå any, skriv ut typene dine der inferensen ikke strekker til, og la kompilatoren hjelpe deg.