Vad är TypeScript? Skillnader mot JavaScript

01Vad är TypeScript?

Det kortaste svaret på vad TypeScript är: JavaScript med typinformation. Tekniskt är TypeScript en överordnad mängd av JavaScript; all giltig JavaScript-kod är också giltig TypeScript-kod. Ovanpå läggs bara typdefinitioner och en kompilator som kontrollerar dem.

Webbläsare och Node.js är inte gjorda för att köra TypeScript direkt. Därför går koden först genom kompilatorn, typinformationen tas bort och vanlig JavaScript blir kvar. Alltså är nyttan med TypeScript i utvecklingsögonblicket; koden som når användaren är fortfarande JavaScript.

Språket presenterades första gången 2012 och har med tiden blivit ett av de ledande verktygen inom webbutveckling. I dag skrivs många populära bibliotek direkt i TypeScript, och de flesta verktyg för att skapa nya projekt erbjuder TypeScript som förstaval vid installationen. Den spridningen betyder att det du lär dig lätt kan tas med till andra projekt.

För någon som inte kan språkets grunder kan det vara tungt att börja direkt med TypeScript. Att först befästa begreppen i vad är JavaScript gör det lättare att förstå vad typsystemet löser.

02Hur fångar typsäkerhet fel?

JavaScript är dynamiskt typat: du kan först tilldela en variabel ett tal och sedan en text, och språket protesterar inte. I små skript är den flexibiliteten bekväm, men i ett projekt med hundratals filer upptäcker man ofta att datan en funktion förväntar sig har ändrats först när det blir fel i produktion.

Typsäkerhet innebär att formen på all data definieras i förväg och att användning som inte stämmer med definitionen avvisas vid kompilering. I exemplet nedan markeras ett felaktigt fältnamn eller en felaktig typ med en röd linje i editorn, innan koden körs.

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 }); // giltigt
ozetYaz({ id: 2, musteri: "Can", tutar: "150", odendi: false });
// Fel: Typen 'string' kan inte tilldelas typen 'number'.

Editorstöd

Typinformationen fångar inte bara fel, den gör också editorn klokare. Vilka fält ett objekt har fylls i automatiskt, vad en funktion förväntar sig syns när du håller muspekaren över den, och när du byter namn på ett fält uppdateras alla användningar tryggt. Den här säkra omstruktureringen (refactoring) sparar mycket tid i stora kodbaser.

03Skillnaden mellan TypeScript och JavaScript

Skillnaden mellan TypeScript och JavaScript finns inte vid körning utan i utvecklingsprocessen. Tabellen nedan jämför de två språken i den dagliga användningen:

04Fördelar med TypeScript

Fördelarna med TypeScript märks mest när projektet växer och teamet blir större. I ett kort skript skrivet av en person är skillnaden liten; i ett system som fem utvecklare arbetar med i två år är den avgörande.

• Tidig felupptäckt: stavfel, saknade fält och fel typer syns innan koden körs.
• Självdokumenterande kod: en funktions indata och utdata kan läsas ur typerna, så du behöver mindre separat dokumentation.
• Trygga ändringar: kompilatorn listar alla filer som påverkas av en ändring i datamodellen.
• Avtal i teamet: typer som delas mellan frontend och backend gör det tydligt vad API:et returnerar.
• Brett stöd i ekosystemet: React, Next.js, Node.js och de flesta vanliga bibliotek levereras med typdefinitioner.

Det finns också nackdelar

TypeScript är inte gratis. Ett kompileringssteg och konfiguration tillkommer, komplexa typdefinitioner kan vara svåra för nybörjare, och any-typer som skrivs i all hast tar tyst bort typsäkerheten. I små och kortlivade projekt kan den extra bördan överstiga nyttan. Dessutom kan vissa gamla och ouppdaterade paket sakna typdefinitioner, och då kan du behöva skriva dem för hand.

05I vilka projekt ska du välja TypeScript?

Beslutet beror på projektets livslängd, storlek och team. Som tumregel har all programvara som flera personer ska underhålla under lång tid nytta av TypeScript.

I system där många datamodeller hänger ihop, som administrationspaneler, bokningsmotorer samt lager- och orderflöden, är typdefinitionerna nästan projektets karta. I skräddarsydda mjukvarulösningar visar den kartan direkt om en ny funktion förstör en gammal vy.

Samma sak gäller projekt som pratar med externa system som marknadsplatser, frakt och bokföring. När formen på det varje tjänst returnerar definieras med typer upptäcks en ändring hos motparten mycket tidigare, vilket minskar överraskningarna i integrationsarbete.

Ett hotellsystem där rum, datum, pris och gästuppgifter används samtidigt på många skärmar, eller ett system för fastighetsannonser där annonser, filter och användarroller är sammanflätade, är bra exempel. När namnet eller typen på ett fält ändras listar kompilatorn alla rapporter, formulär och tjänster som använder fältet på en gång, och teamet slutför ändringen utan att missa något hörn.

• TypeScript är rimligt: appar med många skärmar, paneler, långlivade produkter, API- och integrationslager.
• Inte nödvändigt: enkla presentationssidor, korta kampanjsidor, automationsskript på några rader.

06Vad kostar övergången till TypeScript?

Att flytta ett befintligt JavaScript-projekt till TypeScript är inget som måste göras i ett enda svep. Eftersom kompilatorn kan köra JavaScript- och TypeScript-filer sida vid sida är en gradvis övergång möjlig.

De viktigaste faktorerna för kostnaden är kodbasens storlek, om det finns tester, hur väl biblioteken stöder typer och teamets erfarenhet. I ett projekt med tester går övergången mycket tryggare; vårt inlägg vad är mjukvarutestning är ett bra komplement.

1. Lägg till kompilatorn och en konfigurationsfil i projektet; börja med lösa regler.
2. Skriv varje ny fil i TypeScript.
3. Ta fram typdefinitioner för de mest använda datamodellerna.
4. Konvertera de kritiska modulerna en och en och kör deras tester.
5. När kodbasen är redo skärper du reglerna genom att slå på strict-läget.

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

07Tips för att lära sig TypeScript

Den bästa vägen för dig som vill lära dig TypeScript är att lägga till typer lite i taget i ett JavaScript-projekt du redan kan. Först kommer grundtyperna (string, number, boolean, array), sedan interface- och type-definitioner, och därefter union-typer och generics.

Bygger du gränssnitt går det snabbare att lära sig om du använder TypeScript direkt med React; att definiera komponenternas props med typer är en mycket konkret övning. För React-delen kan du läsa vårt inlägg vad är React.

För den officiella handboken och lekplatsen är typescriptlang.org den mest pålitliga källan. I lekplatsen i webbläsaren ser du direkt vilken JavaScript din kod blir.