Typescript vs Javascript – Forstå forskjellen

Et av de ofte stilte spørsmålene jeg får er, hva er forskjellen mellom JavaScript og Typescript?

La oss finne det ut…

Fra du begynte å kode, ville JavaScript (JS) vært en del av alle frontend-prosjektene dine. Hvis du er litt kjent med JS, tenk på TypeScript som JS pluss noen tilleggsfunksjoner som gjør applikasjonen din penere og maskinskrevet. TypeScript ble utviklet som et åpen kildekode-prosjekt av Microsoft for å gjøre JS-utvikling mer effektiv og fange opp kompileringsfeil tidlig.

I denne artikkelen vil vi diskutere noen viktige funksjoner ved JavaScript og TypeScript og forskjellene mellom begge skriptspråkene.

Hva er JavaScript?

JavaScript brukes til skripting på klientsiden. Du kan lage et skript på en HTML-side eller lage en fil med filtypen .js og inkludere den i HTML-filen din. Et vanlig eksempel fra den virkelige verden hvor du kan se JavaScript er valideringen av påloggingssiden, der du får vist en feil når brukernavnet/passordet ditt er feil.

La oss skrive en enkel JS-kode og kjøre den på nettleseren:

Lag en fil example.html og legg til følgende kode:

<script>

feeling = 'happy';

feeling = 23;

</script>

Denne enkle koden erklærer en variabel og tildeler en verdi av happy (streng) til den. Vi kan tilordne en verdi av en annen type (tall) til samme variabel. JavaScript ville ikke klage på det, og vi kan kjøre koden på hvilken som helst nettleser uten problemer. La oss nå få verdien av følelsen fra brukeren:

  12 beste Enterprise Legal Management (ELM)-løsninger i 2022

Vår HTML vil se slik ut:

<input type = "textbox" id = "howyoufeel">

og manuset blir:

feeling = document.getElementById("howyoufeel").value;

Med mindre vi setter eksplisitte sjekker i skriptet, vil JS godta enhver verdi fra brukeren og sende den videre. Så du kan sette alt som 234, @.#$% osv. i følelsesvariabelen.

Funksjoner av JavaScript

Fra ovenstående kan vi observere følgende funksjoner i JavaScript:

  • Svakt skrevet skriptspråk
  • Brukes for skripting på klientsiden og serversiden (med node.js).
  • Fleksibel og dynamisk
  • Støttes av alle større nettlesere
  • Lett og tolket

Hvis du er interessert i å mestre JavaScript, sjekk ut denne Udemy kurs.

Hva er TypeScript?

En applikasjon fra den virkelige verden vil ha mange valideringer og dynamiske kontroller. For slike applikasjoner vil JavaScript-kode bli vanskelig å teste på et tidspunkt, hovedsakelig fordi det ikke er noen typekontroll. Mens du får verdier fra brukere, er det viktig å få dem rett i begynnelsen. Det er her TypeScript slår inn.

TypeScript er sterkt skrevet og har en kompilator som klager hvis du ikke definerer typen til en variabel.

Både JavaScript og TypeScript samsvarer med ECMAScript-spesifikasjonene for et skriptspråk. Typescript kan kjøre all JavaScript-koden og støtter alle bibliotekene – det er derfor det kalles supersettet av JavaScript.

TypeScript installasjon

For å utføre vår forrige kode i TypeScript, må vi installere TypeScript-kompilatoren ved å bruke npm-pakken (hvis du har node js).

npm install -g typescript

eller last den ned direkte fra den offisielle Microsoft nedlastingsside. Du kan også bruke TS lekeplass for å se hvordan koden er transkompilert fra ts til js.

  6 beste kryptohandelsplattformer for å kjøpe Bitcoin i India

Når dette er gjort, kan du konfigurere prosjektinnstillingene i tsconfig.json og bruke en hvilken som helst IDE- eller tekstredigerer for å skrive TypeScript-kode og lagre den som .ts.

Du kan fortsatt komme unna ved ikke å definere variabeltypen, og TypeScript kan utlede datatypen. Du vil imidlertid få en «følelse»-feil hvis du gir noe annet enn den først brukte typen (i vårt tilfelle en streng) – under selve kompileringen.

Det er alltid pent for koden å ha en typekommentar for vedlikehold og brukervennlighet:

var feeling: string = “happy”;

Det er ikke det!

TypeScript gir mange andre funksjoner for å gjøre livet til en utvikler enklere.

Funksjoner i TypeScript

Typescript har et rikt funksjonssett, og hver utgivelse kommer med nye funksjoner for å gjøre utviklingen enklere enn før. For eksempel, med den nye utgivelsen (4.0), noen tilleggsfunksjoner er variadiske tuppeltyper, tilpassede JSX-fabrikker, klasseegenskapsslutninger fra konstruktører osv. Noen typiske trekk ved TypeScript er:

  • Støtter objektorienterte programmeringskonsepter som grensesnitt, arv, klasse. generiske legemidler
  • Tidlig oppdagelse av feil
  • IDE-støtte med syntakssjekk og forslag
  • Lettere å feilsøke etter hvert som det skrives
  • Transkompilerer til JavaScript
  • Brukes for både server-side og klient-side applikasjoner
  • Støtte på tvers av plattformer og nettlesere
  • Støtter alle JS-biblioteker og utvidelser

Hvorfor trenger vi TypeScript? (Fordeler med TypeScript fremfor JavaScript)

Microsoft utviklet og brukte TypeScript i to år for sine interne prosjekter før de ble offentliggjort i 2012. De opprettet en maskinskrevet JavaScript fordi det var lettere å teste koden for bedriftsapplikasjoner i produksjonsgrad. Du kan fortsatt bruke de dynamiske skrivefunksjonene, men også skrive inn variablene når det virkelig er nødvendig.

  Topp 19 programvaretestverktøy å kjenne til som tester

Tenk på koden nedenfor:

var mynum  = //get from user;

addten(number){

return number + 10;

}

Vi forventer at resultatet alltid er et tall. Men hva om en bruker gir «sau»? Utgangen vil være sau10 – ideelt sett må vi fortelle brukeren at denne operasjonen ikke er mulig!

Når du har typeinformasjonen tilgjengelig, blir tekstredigeringsprogrammet og IDE-ene lettere å bruke og lagrer kjøretidsfeil. Det er også lettere å refaktorisere koden på et senere tidspunkt.

Betyr det at vi ikke trenger JavaScript? (Ulempene med TypeScript fremfor JavaScript)

Du kan tenke på TypeScript som en utvidelse av JavaScript, men absolutt ikke en erstatning.

For mindre biter av kode kan TypeScript bli en overhead – installasjon, kompilering, transkompilering vil være overflødig. Med JavaScript kan du ganske enkelt skrive inn skriptet ditt i HTML, så fungerer det. Det er også lettere å feilsøke koden når du ganske enkelt kan oppdatere nettleseren hver gang du endrer noe.

Head-to-head sammenligning

Nå som vi har forstått funksjonene og fordelene med både TypeScript og JavaScript, la oss gå gjennom flere sammenligninger:

TypeScript
JavaScript
Et maskinskrevet språk som fanger opp kompileringsfeil tidlig
Du kan finne ut feil under kjøring
Egnet for store prosjekter ettersom det forbedrer kodevedlikehold og lesbarhet
Ettersom mer kode legges til, blir det vanskelig å teste og feilsøke, og dermed er JS egnet for små prosjekter
Supersett av JS, dvs. funksjoner som objektorientering, typekontroll og mer
Et skriptspråk som støtter oppretting av dynamisk nettinnhold
Krever kompilatorinstallasjon og konfigurasjonsoppsett
Ikke behov for noen installasjon; JS-kode kan skrives direkte i en nettleser ved å bruke -taggene, lagrer den som HTML – du vil se resultatene! Du kan deretter bygge videre på det for å lage mer dynamisk innhold.

Videre, når du jobber med en storskala applikasjon, vil det å ha JavaScript-kunnskap hjelpe deg enkelt å skifte til TypeScript.

Men fra et karriere- og lønnsperspektiv, som en TypeScript-utvikler, vil du være mer fleksibel og komfortabel med både JS- og TS-prosjekter – så definitivt en bedre ressurs i markedet. Typisk får TypeScript-utviklere alt mellom $110k-$147k, mens JS-utviklere får rundt $63k-$118k per år.