En av de vanligaste frågorna jag får är, vad är skillnaden mellan JavaScript och Typescript?
Låt oss ta reda på…
Från det att du började koda skulle JavaScript (JS) ha varit en del av alla dina front-end-projekt. Om du är lite bekant med JS, tänk på TypeScript som JS plus några ytterligare funktioner som gör din applikation snyggare och maskinskriven. TypeScriptet utvecklades som ett open source-projekt av Microsoft för att göra JS-utvecklingen mer effektiv och fånga upp kompileringsfel tidigt.
I den här artikeln kommer vi att diskutera några viktiga funktioner i JavaScript och TypeScript och skillnaderna mellan båda skriptspråken.
Innehållsförteckning
Vad är JavaScript?
JavaScript används för skript på klientsidan. Du kan skapa ett skript på en HTML-sida eller skapa en fil med filtillägget .js och inkludera det i din HTML-fil. Ett vanligt exempel i verkligheten där du kan se JavaScript är valideringen av inloggningssidan, där du får ett felmeddelande när ditt användarnamn/lösenord är felaktigt.
Låt oss skriva en enkel JS-kod och köra den i webbläsaren:
Skapa en fil example.html och lägg till följande kod:
<script> feeling = 'happy'; feeling = 23; </script>
Denna enkla kod deklarerar en variabel och tilldelar värdet happy (sträng) till den. Vi kan tilldela ett värde av en annan typ (tal) till samma variabel. JavaScript skulle inte klaga på det och vi kan köra koden i vilken webbläsare som helst utan problem. Låt oss nu få värdet av känsla från användaren:
Vår HTML kommer att se ut så här:
<input type = "textbox" id = "howyoufeel">
och skriptet blir:
feeling = document.getElementById("howyoufeel").value;
Såvida vi inte sätter explicita kontroller i skriptet kommer JS att acceptera vilket värde som helst från användaren och skicka det vidare. Så du kan sätta något som 234, @.#$%, etc. i känslavariabeln.
Funktioner i JavaScript
Från ovanstående kan vi observera följande funktioner i JavaScript:
- Svagt skrivet skriptspråk
- Används för skript på klientsidan och serversidan (med node.js).
- Flexibel och dynamisk
- Stöds av alla större webbläsare
- Lätt och tolkad
Om du är intresserad av att behärska JavaScript, kolla in det här Udemy kurs.
Vad är TypeScript?
En applikation i verkligheten kommer att ha många valideringar och dynamiska kontroller. För sådana applikationer kommer JavaScript-kod att bli svår att testa någon gång, främst för att det inte finns någon typkontroll. Samtidigt som man får värden från användarna är det viktigt att få dem rätt i början. Det är här TypeScript kommer in.
TypeScript är starkt skrivet och har en kompilator som klagar om du inte definierar typen av en variabel.
Både JavaScript och TypeScript överensstämmer med ECMAScript-specifikationerna för ett skriptspråk. Typescript kan köra all JavaScript-kod och stöder alla dess bibliotek – det är därför det kallas superset av JavaScript.
Installation av TypeScript
För att exekvera vår tidigare kod i TypeScript måste vi installera TypeScript-kompilatorn med paketet npm (om du har nod js).
npm install -g typescript
eller ladda ner det direkt från tjänstemannen Microsoft nedladdningssida. Du kan också använda TS lekplats för att se hur koden transkompileras från ts till js.
När detta är gjort kan du konfigurera projektinställningarna i tsconfig.json och använda valfri IDE- eller textredigerare för att skriva TypeScript-kod och spara den som .ts.
Du kan fortfarande komma undan genom att inte definiera variabeltypen och TypeScript kan härleda datatypen. Du kommer dock att få ett ”känsla”-fel om du ger något annat än den först använda typen (i vårt fall en sträng) – under själva kompileringen.
Det är alltid snyggt för koden att ha en typanteckning för underhåll och användarvänlighet:
var feeling: string = “happy”;
Det är inte det!
TypeScript tillhandahåller många andra funktioner för att göra en utvecklares liv enklare.
Funktioner i TypeScript
Typescript har en rik funktionsuppsättning och varje version kommer med nya funktioner för att göra utvecklingen enklare än tidigare. Till exempel, med den nya versionen (4.0), några ytterligare funktioner är variadiska tupeltyper, anpassade JSX-fabriker, klassegenskapsinferens från konstruktörer, etc. Några typiska egenskaper hos TypeScript är:
- Stöder objektorienterade programmeringskoncept som gränssnitt, arv, klass. generika
- Tidig upptäckt av fel
- IDE-stöd med syntaxkontroll och förslag
- Lättare att felsöka när det skrivs
- Transkompilerar till JavaScript
- Används för både serversidan och klientsidan applikationer
- Stöd över plattformar och webbläsare
- Stöder alla JS-bibliotek och tillägg
Varför behöver vi TypeScript? (Fördelar med TypeScript över JavaScript)
Microsoft utvecklade och använde TypeScript i två år för sina interna projekt innan de gjorde det offentligt 2012. De skapade ett maskinskrivet JavaScript eftersom det var lättare att testa koden för företagsapplikationer i produktionsklass. Du kan fortfarande använda de dynamiska skrivfunktionerna men även skriva variablerna när det verkligen behövs.
Tänk på koden nedan:
var mynum = //get from user;
addten(number){
return number + 10;
}
Vi förväntar oss att resultatet alltid är en siffra. Men vad händer om en användare ger ”får”? Resultatet blir får10 – helst måste vi berätta för användaren att denna operation inte är möjlig!
Dessutom, när du har typinformationen tillgänglig, blir textredigerare och IDE:er behändigare att använda och sparar runtime-fel. Det är också lättare att omfaktorisera koden vid en senare tidpunkt.
Betyder det att vi inte behöver JavaScript? (Nackdelar med TypeScript framför JavaScript)
Du kan tänka på TypeScript som en förlängning av JavaScript, men absolut inte en ersättning.
För mindre bitar av kod kan TypeScript bli en overhead – installation, kompilering, transkompilering kommer att vara överflödig. Med JavaScript kan du helt enkelt skriva ditt skript i HTML och det skulle fungera. Det är också lättare att felsöka koden när du helt enkelt kan uppdatera webbläsaren varje gång du ändrar något.
Head-to-head 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 fler jämförelser:
TypeScript
JavaScript
Ett maskinskrivet språk som tidigt fångar upp kompileringsfel
Du kan ta reda på fel under körning
Lämplig för stora projekt eftersom det förbättrar kodunderhåll och läsbarhet
Eftersom mer kod läggs till, blir det svårt att testa och felsöka, så passar JS för små projekt
Superset av JS, dvs funktioner som objektorientering, typkontroll och mer
Ett skriptspråk som stöder skapande av dynamiskt webbinnehåll
Kräver kompilatorinstallation och konfigurationsinställning
Inget behov av någon installation; JS-kod kan skrivas direkt i en webbläsare med -taggar, sparar den som HTML – du kommer att se 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 du dessutom att ha kunskap om JavaScript som hjälper dig att enkelt byta till TypeScript.
Men ur ett karriär- och löneperspektiv, som en TypeScript-utvecklare, kommer du att bli mer flexibel och bekväm med både JS- och TS-projekt – så definitivt en bättre tillgång på marknaden. Typiskt får TypeScript-utvecklare allt mellan $110k-$147k, medan JS-utvecklare betalas runt $63k-$118k per år.