En ofta återkommande fråga är: vad skiljer egentligen JavaScript från TypeScript?
Låt oss utforska detta…
Redan från dina första steg inom programmering har JavaScript (JS) troligtvis varit en grundläggande del av dina front-end-projekt. Om du har viss erfarenhet av JS kan du tänka på TypeScript som en utökad version av JS, med ytterligare funktioner som ger din applikation mer struktur och typkontroll. Microsoft utvecklade TypeScript som ett öppen källkodsprojekt för att effektivisera JS-utvecklingen och tidigt upptäcka kompileringsfel.
I den här texten kommer vi att undersöka några viktiga egenskaper hos JavaScript och TypeScript samt skillnaderna mellan dessa två skriptspråk.
Vad är JavaScript?
JavaScript används huvudsakligen för skript på klientsidan. Du kan antingen skriva skript direkt i en HTML-sida eller skapa en separat fil med filändelsen .js och länka den till din HTML-fil. Ett vanligt exempel på JavaScript i praktiken är validering av inloggningssidor, där du ser ett felmeddelande om du angett fel användarnamn eller lösenord.
Låt oss skapa enkel JS-kod och köra den i webbläsaren:
Skapa en fil som heter exempel.html och lägg till följande kod:
<script>
feeling = 'glad';
feeling = 23;
</script>
I den här koden deklareras en variabel och tilldelas värdet ”glad” (en sträng). Vi kan sedan tilldela ett värde av en annan typ (ett tal) till samma variabel. JavaScript ger inga klagomål på detta, och vi kan köra koden i vilken webbläsare som helst utan problem. Låt oss nu hämta värdet för ”känsla” från användaren:
Vår HTML-kod ser då ut så här:
<input type="textbox" id="hurdukar">
Och skriptet blir:
feeling = document.getElementById("hurdukar").value;
Såvida vi inte implementerar specifika kontroller i skriptet, kommer JS att acceptera vilket värde som helst från användaren och använda det. Du kan alltså ange exempelvis 234, @.#$%, etc. som värde i variabeln ”känsla”.
Egenskaper hos JavaScript
Från exemplet ovan kan vi identifiera följande egenskaper hos JavaScript:
- Ett svagt typat skriptspråk
- Används för skript både på klient- och serversidan (med node.js).
- Flexibelt och dynamiskt
- Stöds av alla större webbläsare
- Lättviktigt och interpreterat
Om du är intresserad av att fördjupa dina kunskaper i JavaScript, kolla in denna Udemy-kurs.
Vad är TypeScript?
I en verklig applikation finns det ofta många valideringar och dynamiska kontroller. För sådana applikationer kan JavaScript-koden ibland bli svår att testa, främst på grund av bristen på typkontroll. När man samlar in data från användare är det viktigt att få in rätt datatyper från början. Det är här TypeScript kommer in.
TypeScript är starkt typat och har en kompilator som varnar dig om du inte definierar variabelns datatyp.
Både JavaScript och TypeScript följer ECMAScript-specifikationerna för skriptspråk. TypeScript kan köra all JavaScript-kod och stöder alla dess bibliotek – därför kallas det ett ”superset” av JavaScript.
Installation av TypeScript
För att köra vår tidigare kod i TypeScript, måste vi först installera TypeScript-kompilatorn med hjälp av npm (om du har Node.js installerat).
npm install -g typescript
Alternativt kan du ladda ner den direkt från den officiella Microsoft-nedladdningssidan. Du kan också använda TS-lekplatsen för att se hur kod transkompileras från TS till JS.
När installationen är klar kan du konfigurera projektinställningarna i filen tsconfig.json. Du kan sedan använda valfri IDE eller textredigerare för att skriva TypeScript-kod och spara den med filändelsen .ts.
Du kan fortfarande välja att inte definiera variabelns datatyp, och TypeScript kan då härleda datatypen automatiskt. Du kommer dock att få ett felmeddelande om du försöker ändra datatyp på en variabel till något annat än den typ som använts först (i vårt fall en sträng) – detta inträffar under själva kompileringen.
För en mer välstrukturerad och lättförståelig kod rekommenderas det att ange typen för variabler:
var feeling: string = "glad";
Och det är inte allt!
TypeScript erbjuder en mängd andra funktioner som underlättar utvecklarens arbete.
Egenskaper hos TypeScript
TypeScript har en omfattande uppsättning funktioner, och varje ny version kommer med nya förbättringar för att göra utvecklingen enklare. Till exempel innehåller den nya versionen (4.0) variadiska tuppeltyper, anpassade JSX-fabriker och klassattributsinferens från konstruktorer. Några typiska egenskaper hos TypeScript är:
- Stöder objektorienterade programmeringskoncept som gränssnitt, arv, klasser och generiska typer
- Tidig upptäckt av fel
- IDE-stöd med syntaxkontroll och förslag
- Lättare att felsöka
- Transkompileras till JavaScript
- Används för applikationer både på server- och klientsidan
- Stöd över olika plattformar och webbläsare
- Stöder alla JS-bibliotek och tillägg
Varför behövs TypeScript? (Fördelar med TypeScript jämfört med JavaScript)
Microsoft utvecklade och använde TypeScript internt i två år innan de offentliggjorde det 2012. De skapade ett typat JavaScript eftersom det var lättare att testa koden för stora företagsapplikationer. Du kan fortfarande använda de dynamiska typfunktionerna men även ange variablernas datatyp när det verkligen behövs.
Betrakta koden nedan:
var mittnummer = // hämta från användaren;
läggtilltio(nummer){
return nummer + 10;
}
Vi förväntar oss att resultatet alltid ska vara ett tal. Men vad händer om en användare anger ”får”? Resultatet blir ”får10” – vi borde istället informera användaren om att operationen inte är möjlig!
Dessutom, när typinformation finns tillgänglig blir textredigerare och IDE:er mer användbara och minskar antalet runtime-fel. Det blir också enklare att omstrukturera koden vid ett senare tillfälle.
Innebär det att vi inte behöver JavaScript längre? (Nackdelar med TypeScript jämfört med JavaScript)
Du kan se TypeScript som en utökning av JavaScript, men absolut inte som en ersättning.
För mindre kodavsnitt kan TypeScript bli en onödig belastning – installation, kompilering och transkompilering blir överflödigt. Med JavaScript kan du enkelt skriva skriptet i HTML-koden och det fungerar direkt. Det är också lättare att felsöka koden när du enkelt kan uppdatera webbläsaren varje gång du gör en ändring.
Direkt jämförelse
Nu när vi har förstått funktionerna och fördelarna med både TypeScript och JavaScript, låt oss gå igenom några fler jämförelser:
| TypeScript | JavaScript |
| Ett typat språk som tidigt identifierar kompileringsfel | Fel kan upptäckas under körning |
| Lämpligt för stora projekt då det förbättrar kodunderhåll och läsbarhet | I takt med att koden växer blir testning och felsökning svårare, därför passar JS för mindre projekt |
| Superset av JS, dvs. innehåller funktioner som objektorientering, typkontroll och mer | Ett skriptspråk som stöder skapandet av dynamiskt webbinnehåll |
| Kräver installation av kompilator och konfiguration | Ingen installation behövs; JS-kod kan skrivas direkt i en webbläsare med <script>-taggen |
| Alla .ts-filer konverteras till .js-filer innan de körs; känd som transkompilering | Utvecklare kan direkt inkludera .js-filer i HTML-filer för körning med <src>-taggen |
| Kraftfullt och intuitivt med rika funktioner som moduler, generiska typer och gränssnitt | Lämpligt för enkla webbapplikationer som inte kräver avancerade funktioner |
| Används för skript både på server- och klientsidan | Lätt att använda för skript på klientsidan, men blir tungt och komplext för skript på serversidan |
| Tar längre tid att köra på grund av kompileringssteget | Ingen kompilering krävs, därför snabbare exekvering |
| Stöder både statisk och dynamisk typning | Stöder endast dynamisk typning |
| Vi kan ange typkommentarer, t.ex. var känsla: string = ”glad”; | Typkommentarer kan inte anges eftersom vi inte kan definiera datatyper. |
Slutsats
Från ett inlärningsperspektiv kan JavaScript vara ditt naturliga val. Du öppnar en fil, skriver kod inuti <script></script>-taggar och sparar den som en HTML-fil – och du ser resultatet! Du kan sedan bygga vidare på det för att skapa mer dynamiskt innehåll.
När du arbetar med en storskalig applikation kommer din kunskap om JavaScript att hjälpa dig att enkelt gå över till TypeScript.
Men från ett karriär- och löneperspektiv, som en TypeScript-utvecklare, kommer du att vara mer flexibel och bekväm med både JS- och TS-projekt – vilket gör dig till en mer eftertraktad resurs på marknaden. TypeScript-utvecklare tjänar vanligtvis mellan $110 000 och $147 000 per år, medan JS-utvecklare tjänar ungefär $63 000 till $118 000 per år.