Hva er TypeScript? Forskjellen fra JavaScript

01Hva er TypeScript?

Det korteste svaret på hva TypeScript er: JavaScript med typeinformasjon. Teknisk sett er TypeScript en supermengde av JavaScript, og all gyldig JavaScript-kode er også gyldig TypeScript-kode. Det som legges til, er bare typedefinisjoner og en kompilator som kontrollerer dem.

Nettlesere og Node.js er ikke laget for å kjøre TypeScript direkte. Derfor går koden først gjennom kompilatoren, typeinformasjonen fjernes, og ut kommer vanlig JavaScript. Nytten av TypeScript ligger altså i utviklingsøyeblikket, og koden som sendes til brukeren er fortsatt JavaScript.

Språket ble kunngjort første gang i 2012 og har etter hvert blitt et av hovedverktøyene i webutvikling. I dag skrives mange populære biblioteker direkte i TypeScript, og de fleste verktøy for å opprette nye prosjekter har TypeScript som første valg i oppsettet. Denne utbredelsen betyr at det du lærer, lett kan tas med til andre prosjekter.

For den som ikke kan grunnlaget i språket, kan det være krevende å starte rett på TypeScript. Å først få på plass begrepene i artikkelen Hva er JavaScript gjør det lettere å forstå hva typesystemet løser.

02Hvordan fanger typesikkerhet feil?

JavaScript er dynamisk typet: du kan tilordne et tall til en variabel først og tekst etterpå, og språket protesterer ikke. I små skript er denne fleksibiliteten behagelig. Men i et prosjekt med hundrevis av filer skjer det ofte at du oppdager at dataene en funksjon forventer har endret seg først når det oppstår en feil i produksjon.

Typesikkerhet betyr at formen på hver data defineres på forhånd, og at bruk som ikke samsvarer med definisjonen avvises under kompileringen. I eksempelet under markeres feil feltnavn eller feil type med en rød strek i editoren før koden kjører.

interface Siparis {
  id: number;
  musteri: string;
  tutar: number;
  odendi: boolean;
}

function ozetYaz(s: Siparis): string {
  return `${s.musteri} - ${s.tutar.toFixed(2)}`;
}

ozetYaz({ id: 1, musteri: "Ayşe", tutar: 150, odendi: true }); // gyldig
ozetYaz({ id: 2, musteri: "Can", tutar: "150", odendi: false });
// Feil: Typen 'string' kan ikke tilordnes typen 'number'.

Editorstøtte

Typeinformasjon fanger ikke bare feil, den gir også editoren forstand. Hvilke felt et objekt har, fullføres automatisk, hva en funksjon forventer vises når du holder musen over, og når du endrer navnet på et felt, oppdateres alle bruksstedene trygt. Denne trygge omstruktureringen (refactoring) sparer mye tid i store kodebaser.

03TypeScript vs JavaScript

Forskjellen på TypeScript og JavaScript ligger i utviklingsprosessen, ikke i kjøretiden. Tabellen under sammenligner de to språkene i daglig bruk:

04Fordeler med TypeScript

Fordelene med TypeScript merkes mest etter hvert som prosjektet vokser og teamet blir større. I et kort skript skrevet av én person er forskjellen liten, men i et system fem utviklere jobber med i to år, er den avgjørende.

• Tidlig feildeteksjon: Skrivefeil, manglende felt og feil typer vises før koden kjører.
• Selvdokumenterende kode: Inn- og utdata til en funksjon kan leses av typene, så du trenger mindre egen dokumentasjon.
• Trygge endringer: Alle filer som berøres av en endring i datamodellen, listes opp av kompilatoren.
• Avtale i teamet: Typer som deles mellom frontend og backend gjør det tydelig hva API-et returnerer.
• Bred støtte i økosystemet: React, Next.js, Node.js og de fleste utbredte biblioteker kommer med typedefinisjoner.

Det finnes også ulemper

TypeScript er ikke gratis. Det kommer et kompileringssteg og konfigurasjon, kompliserte typedefinisjoner kan være tunge for nybegynnere, og any-typer som skrives i hast fjerner typesikkerheten uten at noen merker det. I små og kortvarige prosjekter kan denne ekstra byrden overstige nytten. Dessuten kan noen eldre pakker som ikke vedlikeholdes, mangle typedefinisjoner, og da kan det være nødvendig å skrive dem for hånd.

05Hvilket prosjekt bør bruke TypeScript?

Avgjørelsen avhenger av prosjektets levetid, størrelse og team. Som hovedregel har all programvare som flere personer skal vedlikeholde over lang tid, nytte av TypeScript.

I systemer der mange datamodeller henger sammen, som administrasjonspaneler, bookingmotorer og lager- og bestillingsflyter, er typedefinisjonene nærmest et kart over prosjektet. I skreddersydde programvareløsninger viser dette kartet umiddelbart om en ny funksjon ødelegger en gammel skjerm.

Det samme gjelder prosjekter som snakker med eksterne systemer som markedssteder, frakt og regnskap. Når formen på dataene hver tjeneste returnerer er definert med typer, oppdager du en endring hos motparten mye tidligere. Det gir færre overraskelser i integrasjoner.

Et hotellsystem der rom, dato, pris og gjesteinformasjon brukes på mange skjermer samtidig, eller et eiendomssystem der annonser, filtre og brukerroller er flettet inn i hverandre, er gode eksempler på slike prosjekter. Når navnet eller typen på et felt endres, lister kompilatoren opp alle rapporter, skjemaer og tjenester som bruker feltet på én gang, så teamet fullfører endringen uten å hoppe over noen kroker.

• TypeScript gir mening: apper med mange skjermer, paneler, langlivede produkter, API- og integrasjonslag.
• Ikke nødvendig: enkeltsidede presentasjonsnettsider, korte kampanjesider, automatiseringsskript på noen få linjer.

06Kostnaden ved å gå over til TypeScript

Å flytte et eksisterende JavaScript-prosjekt til TypeScript er ikke noe som må gjøres på én gang. Siden kompilatoren kan kjøre JavaScript- og TypeScript-filer sammen, er en gradvis overgang mulig.

De viktigste faktorene som bestemmer kostnaden, er størrelsen på kodebasen, om det finnes tester, typestøtten i bibliotekene som brukes, og teamets erfaring. I et prosjekt med tester går overgangen mye tryggere. Artikkelen vår om hva er programvaretesting er et godt supplement her.

1. Legg kompilatoren og en konfigurasjonsfil til prosjektet, og start med løse regler til å begynne med.
2. Skriv alle nye filer i TypeScript.
3. Lag typedefinisjoner for de mest brukte datamodellene.
4. Konverter kritiske moduler én etter én og kjør testene deres.
5. Når kodebasen er klar, slår du på strict-modus og strammer inn reglene.

npm install --save-dev typescript
npx tsc --init
npx tsc --noEmit

07Tips for å lære TypeScript

Den beste måten for deg som vil lære TypeScript er å legge til typer gradvis i et JavaScript-prosjekt du allerede kjenner. Først kommer grunnleggende typer (string, number, boolean, array), deretter interface- og type-definisjoner, så union-typer og generics.

Hvis du utvikler grensesnitt, gjør det å bruke TypeScript sammen med React det raskere å lære. Å definere props til komponenter med typer er en svært konkret øvelse. For React-siden kan du se artikkelen vår Hva er React.

Den mest pålitelige kilden til den offisielle håndboken og testmiljøet er typescriptlang.org. I lekeplassen i nettleseren ser du umiddelbart hvilken JavaScript koden du skriver, blir til.