TypeScript vs JavaScript: Forstå forskjellene

world wide web kjører i utgangspunktet På JavaScript, HTML og CSS. Dessverre Mangler JavaScript flere funksjoner som vil hjelpe utviklere å bruke den til store applikasjoner. Skriv Inn TypeScript.

Hva Er JavaScript?

JavaScript startet som et skriptspråk For Netscape Navigator-nettleseren; Brendan Eich skrev prototypen over en periode på 10 dager i 1995. Navnet JavaScript er et nikk Til Sun Microsystems Java-språk, selv om de to språkene er ganske forskjellige, og likheten i navn har ført til betydelig forvirring gjennom årene. JavaScript, som har utviklet seg betydelig, støttes nå på alle moderne nettlesere.

JavaScript språk

JavaScript Er et multi-paradigmespråk. Den har krøllete-brakett syntaks og semikolon, som C-familien av språk. Den har svak, dynamisk typing og er enten tolket eller (oftere) just-in-time kompilert. Generelt Er JavaScript single-threaded, selv Om Det er En Web Workers API som gjør multithreading, og det er hendelser, asynkrone funksjonssamtaler og tilbakeringinger.

JavaScript støtter objektorientert programmering ved hjelp av prototyper i stedet for klassearven som brukes I C++, Java og C#, selv om en class – syntaks ble lagt Til JavaScript ES6 i 2015. JavaScript støtter også funksjonell programmering, inkludert nedleggelser, rekursjon og lambdas (anonyme funksjoner).

før JavaScript ES6 hadde språket ingen optimalisering av haleanrop; nå gjør det, selv om du må slå på streng modus ('use strict') for å aktivere den, og implementeringen varierer fra nettleser til nettleser. Strenge modus endrer også semantikken Til JavaScript, og endrer noen normalt stille feil for å kaste feil.

Hva er med «ES6» betegnelsen? Navnet på Det standardiserte JavaScript-språket Er ECMAScript (ES), ETTER ECMA International standards body; ES6 kalles Også ECMAScript 2015 (ES2015). ES2020 er for tiden et utkast til standard.

som et enkelt eksempel for Å gi deg Smaken Av JavaScript-språket, er det noen kode for å avgjøre om det er dag eller kveld og dynamisk sette riktig hilsen til et navngitt webelement som finnes i nettleserens dokumentobjekt:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScript økosystem

Det finnes mange JavaScript-Apier. Noen leveres av nettleseren ,som document API i koden vist ovenfor, og noen leveres av tredjeparter. Noen Apier gjelder for bruk på klientsiden, noen til bruk på serversiden, noen til bruk på skrivebordet, og noen til mer enn ett miljø.

Nettleser-Apier inkluderer document object model (DOM) og browser object model (BOM), Geolocation, Canvas (grafikk), WebGL (GPU-akselerert grafikk), HTMLMediaElement (lyd og video) og WebRTC (sanntidskommunikasjon).

Tredjeparts Apier florerer. Noen er grensesnitt til fulle applikasjoner, For Eksempel Google Maps. Andre er verktøy som gjør JavaScript HTML5 og CSS programmering enklere, for eksempel jQuery. Noen, som Express, er applikasjonsrammer for bestemte formål; For Express er formålet å bygge web-og mobilapplikasjonsservere på Node.js. En rekke andre rammer har blitt bygget på Toppen Av Express. I 2016 diskuterte jeg 22 JavaScript-rammer i et forsøk på å forstå hva som ble noe av en dyrehage; mange av disse rammene eksisterer fortsatt i en eller annen form, men flere har gått i vei.

Det er mange Flere JavaScript-moduler, over 300 000. For å håndtere det bruker vi pakkebehandlere, for eksempel npm, standard pakkebehandling for Node.js.

et alternativ til npm er Garn, som kom Fra Facebook, og hevder fordelen av deterministiske installasjoner. Lignende verktøy inkluderer Bower (Fra Twitter), som administrerer frontend-komponenter i stedet For Nodemoduler; Ender, som kaller seg npms lillesøster; og jspm, som bruker ES-moduler (den nyere ECMA-standarden for moduler), i stedet For CommonJS-moduler, den eldre de-facto-standarden støttet av npm.

Webpack pakker JavaScript-moduler i statiske ressurser for nettleseren. Browserify tillater utviklere å skrive Node.js-stil moduler som kompilerer for bruk i nettleseren. Grunt er en Fil-orientert JavaScript oppgave runner, og gulp er en streaming bygge system Og JavaScript oppgave runner. Valget mellom grunt og gulp er ikke avgjørende. Jeg har både installert og brukt den som ble satt opp for et gitt prosjekt.

For Å gjøre JavaScript-koden mer pålitelig i fravær av kompilering, bruker vi linters. Begrepet kommer fra c-language lint tool, som var et Standard Unix-verktøy. JavaScript linters inkluderer JSLint, JSHint Og ESLint. Du kan automatisere kjører linters etter kodeendringer ved hjelp av en oppgave runner eller IDE. Igjen er valget mellom linters ikke klart, og jeg bruker hvilken som ble satt opp for et gitt prosjekt.

Når jeg Snakker om redaktører og Ideer, har jeg vurdert 6 JavaScript-Ideer og 10 JavaScript-redaktører, sist i 2019. Mine toppvalg var Sublime Text (very fast editor), Visual Studio Code (konfigurerbar editor/IDE) og WebStorm (IDE).

Transpilers lar deg oversette noen andre språk som CoffeeScript eller TypeScript Til JavaScript, og oversette moderne JavaScript (FOR EKSEMPEL ES2015-kode) til et grunnleggende JavaScript som kjører i (nesten) hvilken som helst nettleser. (Alle spill er av for tidlige versjoner Av Internet Explorer.) Den vanligste transpiler for moderne JavaScript Er Babel.

Hva Er TypeScript?

TypeScript Er et skrevet supersett Av JavaScript som kompilerer til vanlig JavaScript(ES3 eller høyere, det kan konfigureres). Åpen kildekode TypeScript kommandolinjekompiler kan installeres som En Node.js pakke. TypeScript-støtte leveres Med Visual Studio 2017 og Visual Studio 2019, Visual Studio Code og WebStorm, og kan legges Til Sublime Text, Atom, Eclipse, Emacs og Vim. Den TypeScript kompilatoren / transpiler tsc er skrevet I TypeScript.

TypeScript legger til valgfrie typer, klasser og moduler Til JavaScript, og støtter verktøy for Store JavaScript-applikasjoner for alle nettlesere, for alle verter, på ALLE OS. Blant mange andre seire For TypeScript, har den populære Angular rammeverk blitt fornyet I TypeScript.

Typer aktiver JavaScript-utviklere å bruke svært produktive utviklingsverktøy og praksis som statisk kontroll og kode refactoring når du utvikler JavaScript-programmer.

Typer er valgfrie, og typeinnledning gjør det mulig for noen få typemerknader å gjøre en stor forskjell for den statiske bekreftelsen av koden din. Typer lar deg definere grensesnitt mellom programvarekomponenter og få innsikt i virkemåten til eksisterende JavaScript-biblioteker.

TypeScript tilbyr støtte for de nyeste Og utviklende JavaScript-funksjonene, inkludert De Fra ECMAScript 2015 og fremtidige forslag, for eksempel async-funksjoner og dekoratører, for å bidra til å bygge robuste komponenter.

TypeScript language

TypeScript-språket godtar JavaScript som gyldig,men tilbyr flere alternativer for typemerknader, typekontroll ved kompileringstid, klasser og moduler. Alle disse er enormt nyttige når du prøver å produsere robust programvare. Plain JavaScript genererer feil bare under kjøring, og da bare hvis programmet skjer for å nå en bane med feil.

TypeScript i 5 minutter opplæringen gjør fordelene klare. Utgangspunktet er ren JavaScript med en .ts forlengelse:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

hvis du kompilerer dette med tsc, vil det produsere en identisk fil med en .js forlengelse.

opplæringen har du endre denne koden i en trinnvis måte, legge til en type annotasjon person:string i funksjonsdefinisjonen, kompilering, testing type kontroll av kompilatoren, legge til et grensesnitt for en person type, og til slutt legge til en klasse for Student. Den endelige koden er:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

Når du kompilerer dette og ser På det utstrålede JavaScript, ser du at klasser I TypeScript bare er en stenografi for samme prototypebaserte arv som brukes i vanlig JavaScript ES3. Merk at egenskapene person.firstName og person.lastName genereres automatisk av kompilatoren når den ser sine public – attributter i Student – klassekonstruktøren, og også overført til Person – grensesnittet. En av de fineste fordelene med typemerknader I TypeScript er at de gjenkjennes av verktøyene, for Eksempel Visual Studio-Kode:

IDG

hvis det er feil i koden mens du redigerer I VS-Kode, ser du feilmeldingene i Kategorien Problemer, for eksempel følgende hvis du sletter slutten av linjen med oppstart av Student:

IDG

Opplæringen Migrering Fra JavaScript går i detalj om hvordan du oppgraderer et Eksisterende JavaScript-prosjekt. Hoppe over oppsettstrinnene, er kjernen i metoden å omdøpe din.js filer til .ts en om gangen. (Hvis filen bruker JSX, en utvidelse Som Brukes Av React, må du gi den nytt navn til .tsx i stedet for .ts.) Stram deretter opp feilkontrollen og reparer feilene .

blant annet må du endre modulbaserte require() eller define() -setninger til TypeScript import-setninger og legge til deklarasjonsfiler for biblioteksmoduler du bruker. Du bør også omskrive moduleksporten din ved hjelp av TypeScript export – setningen. TypeScript støtter CommonJS moduler, som Node.js gjør.

hvis du får feil om feil antall argumenter, kan du skrive typescript funksjon overbelastning signaturer. Det er En viktig funksjon JavaScript mangler. Til slutt bør du legge til typer til dine egne funksjoner, og eventuelt bruke grensesnitt eller klasser.

du trenger vanligvis ikke å skrive dine egne deklarasjonsfiler for JavaScript-biblioteker i public domain. DefinitelyTyped er et lager av deklarasjonsfiler, som alle er tilgjengelige ved hjelp av npm. Du kan finne deklarasjonene ved Hjelp Av Typensøkeside.

Når du har konvertert Alle JavaScript-filene dine Til TypeScript, styrket typene og eliminert feilene, har du en mye mer robust kodebase. I stedet for å stadig fikse kjøretidsfeilene rapportert av testere eller brukere, kan du oppdage de vanligste feilene statisk.

Det er verdt Å se Anders Hejlsberg diskutere TypeScript. Som du vil høre fra ham, Er TypeScript JavaScript som skalerer.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.