varför ska du välja TypeScript över JavaScript

BY admin

| december 26, 2021

TypeScript har ökat i sin popularitet de senaste åren. Det nämns bland de fem mest lovande språken 2020. Angular, en av de största frontend-ramarna, använder TypeScript. Cirka 60% av JS-programmerare använder redan TypeScript och 22% vill försöka. Varför?

historiskt sett har JavaScript hamnat som huvudspråk för att skriva webbsidor och appar på Internet. Det är nu möjligt att använda JavaScript på både frontend och backend med ramar som Node.js och Deno.

men var JavaScript gjord för att skapa stora, komplexa system som de på den moderna webben? Nepp.

i den här artikeln kommer vi att presentera en lösning för det – TypeScript – och komma igång mot vägen för att lägga till typer i din JavaScript-kod.

här är några av de punkter vi kommer att täcka:

Vad är TypeScript?
Vad är typer, och hur fungerar de i TS?
JavaScript vs. TypeScript: vilken ska man välja?
hur man kommer igång med TypeScript.
ytterligare resurser för att studera TypeScript.

Vad är TypeScript?

kort sagt, TypeScript är en superset av JavaScript som har valfri typning och kompilerar till vanlig JavaScript.

i enklare ord är TypeScript Tekniskt JavaScript med statisk typning, när du vill ha det.

nu, vad skulle vara orsakerna till att lägga till statisk typing till JavaScript?

jag kan lista minst tre:

du kan undvika mästerligt dolda ninja-fel som den klassiska 'undefined' is not a function.
det är lättare att refactor-kod utan att bryta den avsevärt.
att orientera sig i komplexa, storskaliga system är inte längre en mardröm.

faktiskt visar en studie att 15% av alla JavaScript-fel kan upptäckas med TypeScript.

friheten för dynamisk typning leder ofta till buggar som inte bara minskar effektiviteten i programmerarens arbete, men kan också slipa utvecklingen för att stoppa på grund av ökade kostnader för att lägga till nya kodrader.

därför misslyckas JavaScript med att införliva saker som typer och kompileringsfel kontroller gör det till ett dåligt val för server-sidokod i företag och stora kodbaser. Som deras tagline säger är TypeScript JavaScript som skalar.

Vad behöver jag för att lära mig att använda TypeScript?

TypeScript är i huvudsak en JS linter. Eller, JS med dokumentation som kompilatorn kan förstå.

därför, i motsats till andra språk som CoffeeScript (som lägger till syntaktiskt socker) eller PureScript (som inte ser ut som JavaScript alls), behöver du inte lära dig mycket för att börja skriva TypeScript-kod.

typer i TS är valfria, och varje JS-fil är en giltig TypeScript-fil. Medan kompilatorn kommer att klaga om du har typfel i dina ursprungliga filer, ger det dig tillbaka en JavaScript-fil som fungerar som den gjorde tidigare. Var du än är kommer TypeScript att träffa dig där, och det är lätt att bygga upp dina färdigheter gradvis.

används TypeScript på frontend eller backend?

TypeScript sammanställs till JavaScript. Därför kan TS användas var som helst JS kan användas: både frontend och backend.

JavaScript är det mest populära språket för att implementera skript för frontend av appar och webbsidor. Således kan TypeScript användas för samma ändamål, men det lyser i komplexa företagsprojekt på serversidan.

på Serokell implementeras det mesta av vårt webbgränssnitt i TypeScript.

Vad är typer, och hur fungerar de i TS?

kort introduktion till typer

typer är ett sätt att berätta korrekta program från felaktiga innan vi kör dem genom att beskriva i vår kod hur vi planerar att använda våra data. De kan variera från enkla typer som antal och sträng till komplexa strukturer perfekt modellerade för vår problemdomän.

programmeringsspråk faller i två kategorier: statiskt typade eller dynamiskt typade.

på språk med statisk typning måste variabeltypen vara känd vid kompileringstiden. Om vi förklarar en variabel, bör den vara känd (eller inferrabel) av kompilatorn om det kommer att vara ett tal, en sträng eller en boolesk. Tänk Java.

på språk med dynamisk typning är det inte nödvändigtvis så. Typen av en variabel är endast känd när programmet körs. Tänk Python.

TypeScript kan stödja statisk typning, medan JavaScript inte gör det.

på grund av statisk typning av TypeScript måste du försöka svårare att:

introducera odefinierade variabler (hjälp för kompileringstidsvarningar)
summera två strängar som har siffror i dem (som ”4” + ”20” = ”420”)
gör operationer på saker som inte tillåter dem, till exempel att trimma ett nummer.

med statiska typsystem kan du skapa dina egna komposittyper. Detta gör det möjligt för ingenjörer att uttrycka sina avsikter mer detaljerat.

explicita typer gör också din kod självdokumenterande: de ser till att dina variabler och funktioner matchar vad som är avsett och gör det möjligt för datorn att ta hand om att komma ihåg det omgivande sammanhanget.

typer av TypeScript

TypeScript har en mängd olika grundläggande typer, som Boolean, Number, String, Array, Tuple, etc. Några av dessa finns inte i JS; du kan lära dig mer om dem i dokumentationen för TypeScript.

förutom dem, här är några andra typer som vi vill presentera för att visa UTTRYCKLIGHETEN hos TS:

någon & okänd

medan någon som en typ kan täcka, ja, allt du önskar, okänd är dess typsäkra motsvarighet.

när du vill fly från typsystemet kan du tilldela någon JavaScript-variabel till den. Det används ofta för att modellera inkommande variabler (till exempel från tredje parts API: er) som ännu inte har kontrollerats och vars typ är okänd.

okänt är mycket som alla, men det låter dig inte utföra några operationer på variabeln innan den uttryckligen typkontrolleras.

ogiltig

Void används när det inte returneras något värde, till exempel som returtyp av funktioner som returnerar ingenting.

aldrig

aldrig är returtypen för något som aldrig borde inträffa, som en funktion som kommer att kasta ett undantag.

korsning & Unionstyper

dessa gör att du kan skapa anpassade typer för att bättre passa din logik.

Skärningstyper gör att du kan sätta ihop flera grundläggande typer i en typ. Du kan till exempel skapa en anpassad typ Person som har en name: string och en phone_number: number. Det motsvarar att säga: Jag vill att min typ ska vara detta och det.

Unionstyper gör det möjligt för din typ att ta en av de flera grundläggande typerna. Du kan till exempel ha en fråga som returnerar antingen result: string eller undefined. Det motsvarar att säga: Jag vill att min typ ska vara den här eller den där.

om du tänker på typer som Mellanslag, är alla dessa typer snabbt vettiga.

typer i TypeScript kan vara både implicit och explicit. Om du inte uttryckligen skriver dina typer kommer kompilatorn att använda Typ inferens för att härleda de typer du använder.

att skriva dem uttryckligen ger dock fördelar som att hjälpa andra utvecklare som läser din kod och se till att det du ser är vad kompilatorn ser.

TypeScript vs. JavaScript

det lönar sig att vara pragmatisk. Ta en titt på den här grafen:

från ingenstans är TypeScript nu på 7: e plats i GitHub pull-förfrågningar för Q1 2020, ovanför PHP och C. (Källa)

medan en betydande orsak till detta är stöd för TypeScript av företag som Microsoft (som skapade det) och Google, stöds det av en god anledning.

3 Skäl att välja TypeScript över JavaScript

1. TypeScript är mer tillförlitligt

till skillnad från JavaScript är TypeScript-kod mer tillförlitlig och lättare att refactor. Detta gör det möjligt för utvecklare att undvika fel och skriva om mycket lättare.

typer ogiltigförklarar de flesta dumma fel som kan smyga in i JavaScript-kodbaser och skapa en snabb återkopplingsslinga för att fixa alla små misstag när du skriver ny kod och refactoring.

2. TypeScript är mer explicit

Making types explicit fokuserar vår uppmärksamhet på hur exakt vårt system är byggt, och hur olika delar av det interagerar med varandra. I storskaliga system är det viktigt att kunna abstrahera resten av systemet samtidigt som man håller sammanhanget i åtanke. Typer gör det möjligt för oss att göra det.

3. TypeScript och JavaScript är praktiskt taget utbytbara, så varför inte?

eftersom JavaScript är en delmängd av TypeScript kan du använda alla JavaScript-bibliotek och kod som du vill ha i din TypeScript-kod.

mest populära JavaScript – bibliotek har typer 2020-definitivt skrivit är ett förråd med typer för många olika JavaScript-bibliotek som du kan använda för att göra dina interaktioner med dem mer typsäkra.

det betyder att du gradvis kan anta TypeScript i din JavaScript-kodbas, först lägga till typer till enskilda moduler och sedan expandera för att… konsumera det kända universum, antar jag.

nackdelar med TypeScript

du kan inte bara ta ett JavaScript-team eller ett JavaScript-arkiv och omedelbart byta dem till idiomatiskt TypeScript. Det finns kompromisser, och upfront tid offer du måste göra.

medan vi kan argumentera för de besparingar som är uttryckliga om typer ger dig på lång sikt, på kort sikt tar det mer tid att lägga till dem. Detta är förmodligen inte en stor sak, men det är ett argument till förmån för JavaScript.

därför kanske du inte väljer TypeScript för små projekt och prototyper för eget bruk.

tester vs. typer

för att kortfattat beröra diskussionen om testning vs. typer: båda dessa saker fångar olika klasser av buggar, så det är vettigt att göra båda på ett icke-partisanliknande sätt.

du kan fortfarande använda både enhetstestning och mer avancerade tekniker som egenskapsbaserad testning med TS samtidigt som du behåller fördelarna med ett statiskt typsystem.

för att sammanfatta det, här är en snabb jämförelse av båda språken:

TypeScript	JavaScript
TS är ett objektorienterat skriptspråk	JS är ett objektorienterat skriptspråk
beroende språk (kompilerar till JavaScript)	oberoende språk (kan tolkas och köras)
kompilerat språk, kan inte köras direkt i en webbläsare	tolkat språk, exekveras direkt i en webbläsare
kan skrivas statiskt	dynamiskt skrivet
bättre strukturerad och koncis	mer flexibel eftersom du inte är begränsad av typsystemet
har en .ts förlängning	har en .JS förlängning
skapad hos Microsoft av Anders Hejlsberg (designer av C#) och underhålls av Microsoft	skapad av Brendan Eich (Netscape) och underhålls av ECMA (European Computer Manufacturers Association).
ett rättvist val för komplexa projekt	bra att arbeta med små, enkla projekt

TypeScript snabbstartsguide

TypeScript kompilator

för att kompilera din TS-kod måste du installera tsc (kort för TypeScript compiler). Det enklaste sättet att göra det är via terminalen. Detta kan göras enkelt via npm genom att använda följande kommando:

npm install -g typescript

om du vill använda TypeScript med Visual Studio-kod finns det en praktisk guide på deras hemsida.

när du har installerat tsckan du kompilera dina filer med tsc filename.ts.

migrera dina filer från JavaScript till TypeScript

låt oss säga att vi vill ändra följande JavaScript-fil till TypeScript på grund av udda beteende:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

goda nyheter. Alla JS-filer är tekniskt en giltig TypeScript-fil, så du har en bra start – byt bara filtillägget till .ts från .js.

TypeScript har typ inferens, vilket innebär att det automatiskt kan härleda några av de typer du använder utan att du lägger till dem. I det här fallet antar det att funktionen summerar två variabler av vilken typ som helst, vilket är sant men inte till stor nytta just nu.

om vi bara vill summera siffror kan vi lägga till en typsignatur till my_sum så att den bara accepterar siffror.

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

nu ger TypeScript oss ett fel.

Argument of type 'string' is not assignable to parameter of type 'number'.

bra att vi hittade var felet är. 🙂 För att ytterligare undvika fel som dessa kan du också lägga till typdefinitioner i variabler.

let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok.

TypeScript är ganska flexibel i vad det kan göra och hur det kan hjälpa dig. För ett mindre trivialt exempel på hur du flyttar din befintliga JavaScript-kodbas till TypeScript eller använder TypeScript för att förbättra din JS-kod, läs den här guiden.

Hur använder man TypeScript i en webbläsare?

för att köra TypeScript i en webbläsare måste den transpileras i JavaScript med TypeScript compiler (tsc). I detta fall skapar tsc en ny .js-fil baserad på .ts-kod, som du kan använda på något sätt du kan använda en JavaScript-fil.

resurser för vidareutbildning

TypeScript djupdykning

denna gratis webbresurs har allt du behöver för att börja med TypeScript, inklusive mer detaljerade förklaringar av de avsnitt vi redan har täckt här.

Lär TypeScript Från Början!

en praktisk 3-timmars kurs som går igenom alla grundläggande funktioner i TypeScript, hur man använder den för att interagera med vissa JS-ramar och hur man använder kraften i TypeScript när man skriver JavaScript.

övning

övning är den bästa resursen för att öva på att skriva kod på ett nytt programmeringsspråk. Mentorer som kommer att styra dig mot idiomatisk kod, massor av roliga övningsuppgifter – det finns inget att inte älska om denna webbplats.

slutsatser

Sammantaget är TypeScript ett bra verktyg att ha i din verktygsuppsättning även om du inte använder den till sin fulla kapacitet. Det är lätt att börja små och växa långsamt, lära sig och lägga till nya funktioner när du går. TypeScript är pragmatiskt och välkomnande för nybörjare, så det finns ingen anledning att vara rädd.

jag hoppas att den här artikeln kommer att vara användbar i din TypeScript resa. Om du vill ha hjälp eller har några frågor, var noga med att fråga dem på våra sociala medier som Twitter eller Facebook.