Et af de ofte stillede spørgsmål, jeg modtager, er, hvad er forskellen mellem JavaScript og Typescript?
Lad os finde ud af det…
Fra det tidspunkt, hvor du begyndte at kode, ville JavaScript (JS) have været en del af alle dine frontend-projekter. Hvis du er lidt fortrolig med JS, så tænk på TypeScript som JS plus nogle ekstra funktioner, der gør din applikation pænere og maskinskrevet. TypeScriptet blev udviklet som et open source-projekt af Microsoft for at gøre JS-udvikling mere effektiv og fange kompileringsfejl tidligt.
I denne artikel vil vi diskutere nogle vigtige funktioner i JavaScript og TypeScript og forskellene mellem begge scriptsprog.
Indholdsfortegnelse
Hvad er JavaScript?
JavaScript bruges til scripting på klientsiden. Du kan oprette et script på en HTML-side eller oprette en fil med filtypenavnet .js og inkludere det i din HTML-fil. Et almindeligt eksempel fra den virkelige verden, hvor du kan se JavaScript, er login-sidens validering, hvor du får vist en fejl, når dit brugernavn/adgangskode er forkert.
Lad os skrive en simpel JS-kode og køre den på browseren:
Opret en fil example.html og tilføj følgende kode:
<script> feeling = 'happy'; feeling = 23; </script>
Denne simple kode erklærer en variabel og tildeler en værdi af happy (streng) til den. Vi kan tildele en værdi af en anden type (tal) til den samme variabel. JavaScript ville ikke klage over det, og vi kan køre koden på enhver browser uden problemer. Lad os nu få værdien af følelse fra brugeren:
Vores HTML vil se sådan ud:
<input type = "textbox" id = "howyoufeel">
og scriptet bliver:
feeling = document.getElementById("howyoufeel").value;
Medmindre vi sætter eksplicitte checks i scriptet, vil JS acceptere enhver værdi fra brugeren og videregive den. Så du kan sætte alt som 234, @.#$% osv. i følelsesvariablen.
Funktioner af JavaScript
Fra ovenstående kan vi observere følgende funktioner i JavaScript:
- Svagt skrevet scriptsprog
- Bruges til klient- og serverside (med node.js) scripting
- Fleksibel og dynamisk
- Understøttet af alle større browsere
- Let og fortolket
Hvis du er interesseret i at mestre JavaScript, så tjek dette Udemy kursus.
Hvad er TypeScript?
En applikation fra den virkelige verden vil have mange valideringer og dynamiske kontroller. For sådanne applikationer bliver JavaScript-kode svær at teste på et tidspunkt, primært fordi der ikke er nogen typekontrol. Mens du får værdier fra brugerne, er det vigtigt at få dem lige i begyndelsen. Det er her TypeScript slår ind.
TypeScript er stærkt indtastet og har en compiler, der klager, hvis du ikke definerer typen af en variabel.
Både JavaScript og TypeScript er i overensstemmelse med ECMAScript-specifikationerne for et scriptsprog. Typescript kan køre al JavaScript-koden og understøtter alle dens biblioteker – det er derfor, det kaldes JavaScript-supersættet.
TypeScript installation
For at udføre vores tidligere kode i TypeScript, skal vi installere TypeScript-kompileren ved hjælp af npm-pakken (hvis du har node js).
npm install -g typescript
eller download det direkte fra embedsmanden Microsoft downloads side. Du kan også bruge TS legeplads for at se, hvordan koden trans-kompileres fra ts til js.
Når dette er gjort, kan du konfigurere projektindstillingerne i tsconfig.json og bruge en hvilken som helst IDE- eller teksteditor til at skrive TypeScript-kode og gemme den som .ts.
Du kan stadig slippe væk ved ikke at definere variabeltypen, og TypeScript kan udlede datatypen. Du vil dog få en ‘feeling’-fejl, hvis du giver noget andet end den først brugte type (i vores tilfælde en String) – under selve kompileringen.
Det er altid pænt for koden at have en typeanmærkning for vedligeholdelse og brugervenlighed:
var feeling: string = “happy”;
Det er det ikke!
TypeScript giver mange andre funktioner for at gøre en udviklers liv lettere.
Funktioner i TypeScript
Typescript har et rigt funktionssæt, og hver udgivelse kommer med nye funktioner, der gør udviklingen nemmere end før. For eksempel med den nye udgivelse (4.0), nogle ekstra funktioner er variadiske tuple-typer, tilpassede JSX-fabrikker, klasseegenskabsinferens fra konstruktører osv. Nogle typiske træk ved TypeScript er:
- Understøtter objektorienterede programmeringskoncepter som interface, arv, klasse. generiske lægemidler
- Tidlig opdagelse af fejl
- IDE-understøttelse med syntakskontrol og forslag
- Nemmere at fejlfinde, når det skrives
- Transkompileres til JavaScript
- Anvendes til både server-side og klient-side applikationer
- Support på tværs af platforme og browsere
- Understøtter alle JS biblioteker og udvidelser
Hvorfor har vi brug for TypeScript? (Fordele ved TypeScript frem for JavaScript)
Microsoft udviklede og brugte TypeScript i to år til sine interne projekter, før de gjorde det offentligt i 2012. De oprettede et maskinskrevet JavaScript, fordi det var nemmere at teste koden til virksomhedsapplikationer i produktionsklasse. Du kan stadig bruge de dynamiske indtastningsfunktioner, men også indtaste variablerne, når det virkelig er nødvendigt.
Overvej nedenstående kode:
var mynum = //get from user;
addten(number){
return number + 10;
}
Vi forventer, at resultatet altid er et tal. Men hvad nu hvis en bruger giver “får”? Outputtet vil være får10 – ideelt set skal vi fortælle brugeren, at denne operation ikke er mulig!
Når du har typeoplysningerne tilgængelige, bliver teksteditorerne og IDE’erne også nemmere at bruge og gemmer runtime-fejl. Det er også lettere at refaktorisere koden på et senere tidspunkt.
Betyder det, at vi ikke har brug for JavaScript? (Ulempe ved TypeScript i forhold til JavaScript)
Du kan tænke på TypeScript som en udvidelse af JavaScript, men bestemt ikke en erstatning.
For mindre bidder af kode kan TypeScript blive en overhead – installation, kompilering, trans-kompilering vil være overflødig. Med JavaScript kan du blot skrive dit script i HTML, og det ville virke. Det er også nemmere at fejlsøge koden, når du blot kan opdatere browseren, hver gang du ændrer noget.
Head-to-head sammenligning
Nu hvor vi har forstået funktionerne og fordelene ved både TypeScript og JavaScript, lad os gennemgå flere sammenligninger:
TypeScript
JavaScript
Et maskinskrevet sprog, der fanger kompileringsfejl tidligt
Du kan finde ud af fejl under kørsel
Velegnet til store projekter, da det forbedrer kodevedligeholdelse og læsbarhed
Efterhånden som mere kode tilføjes, bliver det vanskeligt at teste og fejlfinde, så JS er velegnet til små projekter
Supersæt af JS, dvs. funktioner som objektorientering, typekontrol og mere
Et scriptsprog, der understøtter oprettelse af dynamisk webindhold
Kræver compilerinstallation og konfigurationsopsætning
Intet behov for nogen installation; JS-kode kan skrives direkte i en browser ved hjælp af -tags, gemmer den som HTML - du vil se resultaterne! Du kan derefter bygge videre på det for at skabe mere dynamisk indhold.
Yderligere, når du arbejder på en storstilet applikation, vil det at have JavaScript-viden hjælpe dig med nemt at skifte til TypeScript.
Men fra et karriere- og lønperspektiv, som en TypeScript udvikler, vil du være mere fleksibel og komfortabel med både JS- og TS-projekter – så absolut et bedre aktiv på markedet. Typisk betales TypeScript-udviklere alt mellem $110k-$147k, mens JS-udviklere betales omkring $63k-$118k om året.