Hur du porterar ditt JavaScript-program till TypeScript

Ursprungligen släppt 1995 efter en förbluffande kort utvecklingsperiod, har JavaScript sedan dess blivit en integrerad del av många webbplatser och appar. Idag har JavaScript hittat ett hem i både klient- och serversidans applikationer. Utvecklare efterfrågar fortfarande massor av funktioner, trots alla förändringar de har upplevt under åren.

TypeScript är ett skriptspråk som utökar JavaScript med många av dessa efterlängtade funktioner. Typkommentarer, anpassad typning och gränssnitt är alla viktiga komponenter, tillsammans med bättre verktyg för att öka produktiviteten.

Varför bry sig om att byta?

Utsikten att byta språk i stora projekt kan vara stressande. Tack och lov för alla som överväger uppgiften är processen att porta ett projekt från JavaScript till TypeScript ganska enkel.

JavaScript har ägnat de senaste åren åt att bli ett stort programmeringsspråk. Ursprungligen användes endast för front-end-skript på webbplatser, lanseringen av Node.js förde JavaScript-serversidan, vilket hjälpte till att utöka dess popularitet.

Även om JavaScript har blivit mycket mer populärt nyligen, finns det många funktioner som dess senaste implementering, ES6, fortfarande saknar. För många utvecklare begränsar dessa bristande funktioner användbarheten av JavaScript som språk.

TypeScript syftar till att rätta till dessa problem genom att omsluta JavaScript med extra funktioner och sedan transpilera användarkod. Resultatet är ett typsäkert språk med enkelheten och användbarheten av JavaScript.

Det finns redan flera verktyg och ramverk där ute med fullt TypeScript-stöd. Angular har använt det länge, och till och med React har sätt att implementera TypeScript.

TypeScript är som JavaScript-förbättrad

TypeScript implementerar många av de funktioner som utvecklare ofta efterfrågar i JavaScript. TypeScript är uppkallat efter det kompletta typsystemet som det implementerar, inklusive funktioner som typkontroll, säkerhet och implicit typning. TypeScript låter dig till och med definiera och använda anpassade namnrymder.

TypeScript innehåller också gränssnitt, uppräkningar och typinferens. TypeScript upprätthåller stöd för funktioner från den senaste JavaScript-implementeringen tillsammans med äldre funktioner, och lägger till en uppsättning nya funktioner.

Totalt sett ligger TypeScripts fokus på att skapa en säkrare utvecklingsprocess med starkare verktyg för att hjälpa kodare.

Det uppmuntrar typsäker kod

TypeScript använder ett inbyggt typkontrollsystem för att validera variabeltyper. Den innehåller en uppsättning standardtyper med möjlighet att definiera dina egna klasser och typer. Typer kan uttryckligen deklareras eller antas baserat på tilldelning.

TypeScript har flera standarddatatyper, inklusive strängar, siffror, booleaner och tupler. Det finns också variabeltyper, som okända och andra, som låter dig använda svagt skriven kod.

TypeScripts typinferens låter dig köra typkontroller på även standard JavaScript-kod genom att köra den genom TypeScripts transpiler.

Transpilering gör det lätt att använda

Ur ett utvecklarperspektiv är en av de bästa funktionerna i TypeScript att den matar ut vanilj JavaScript. Du kan köra TypeScript-kod genom en process som kallas transpilering, som liknar kompilering.

Istället för en körbar fil är resultatet av transpilering ett skript på ett annat språk än kodens ursprungliga.

TypeScript-kod överförs till JavaScript som du sedan kan köra på en server eller klient. Detta låter dig snabbt och enkelt skriva kod som du kan köra på nästan vilken plattform som helst.

TypeScript hjälper utvecklarproduktiviteten

Genom att lägga till typer i JavaScript kan kod inte bara köras säkert, det ger också utvecklare verktyg som gör kodning enklare. De flesta moderna IDE: er erbjuder TypeScript-stöd som tillåter kodkompletteringsverktyg som IntelliSense att erbjuda ytterligare kontext till kod. Det kan också erbjuda typkontroll medan du skriver, vilket hjälper dig att fånga upp fel snabbare.

Dessutom är TypeScripts extra datastrukturer och syntax utformade för att öka kodläsbarheten. Dessa funktioner gör det snabbare och enklare att skapa högkvalitativ kod och upptäcka potentiella problem innan de blir problematiska.

Hur kan du portera din kod?

Om du startar ett helt nytt projekt, skapa ett nytt TypeScript-projekt är ganska enkelt. Att konvertera ett redan existerande projekt till TypeScript är dock lite mer involverat.

Under de flesta normala omständigheter är utsikterna att konvertera ett projekt från ett språk till ett annat skrämmande. Konverteringen från JavaScript till TypeScript är dock förvånansvärt enkel.

TypeScript som en superset av JavaScript

TypeScript anses vara en superuppsättning av JavaScript. Det betyder att TypeScript lägger till ytterligare lager av syntax och funktionalitet, utan att ändra eller ta bort kärnfunktionaliteten som den bygger kring.

För utvecklare betyder detta att all kod som körs korrekt i JavaScript automatiskt kommer att köras korrekt i TypeScript. Oavsett om skriptet i fråga är en webbserver skriven för att köras i NodeJS, eller en uppsättning front-end-skript för en webbsida, är det exceptionellt enkelt att byta.

Efter att ha installerat TypeScript-transpilern kan du skapa en enkel tsconfig.json fil med följande innehåll:

{
"compilerOptions": {
"outDir": "./bygga",
"tillåta": Sann,
"mål": "es5"
 },
"omfatta": ["./src/**/*"]
}

Flytta alla tillämpliga filer till src-katalogen och kör transpilern. Detta kommer att skapa de resulterande JavaScript-filerna i bygga katalog.

Dessa snabba och enkla ändringar kommer att konvertera ett standard JavaScript-projekt till ett TypeScript. Härifrån är du fri att använda de nya funktionerna som TypeScript erbjuder när du vill. Du kan kommentera typer på variabler, implementera anpassade typer och definiera gränssnitt.

Efter varje transpilering kan du använda utdata från bygga katalogen efter behov genom att lägga till filerna i alla projekt precis som du normalt skulle göra. Transpileraren kommer att skriva check standard JavaScript och konvertera nya funktioner till giltiga ES5-skript.

Vad du behöver veta för att gå från JS till TS

Processen att konvertera ett projekt från JavaScript till TypeScript är exceptionellt enkel. Konvertering är så enkelt som att byta ut katalogstrukturen, lägga till en konfigurationsfil och installera transpileraren.

Att få ut alla fördelar med det nya språket kan dock vara ett mycket längre projekt. Även om TypeScript kan härleda typen av varje variabel i ett projekt, bör dessa uttryckligen deklareras. Att gå tillbaka och lägga till anpassade typer till ett projekt, lägga till korrekta kommentarer och skapa gränssnitt kan vara tidskrävande.

Genom att lägga till dessa funktioner i ett projekt kan du dock skörda fördelarna som kommer med korrekt typkontroll och utökad verktyg. Stora projekt kommer att bli snabbare och enklare att bygga, du kommer att identifiera fel tidigare och nya utvecklare kommer att ha lättare att läsa din kod.