TypeScript vs. JavaScript: forstå forskellene

internettet kører grundlæggende på JavaScript, HTML og CSS. Desværre mangler JavaScript flere funktioner, der kan hjælpe udviklere med at bruge det til store applikationer. Indtast TypeScript.

Hvad er JavaScript?

JavaScript startede som et scriptsprog for Netscape Navigator; Brendan Eich skrev prototypen over en periode på 10 dage i 1995. Navnet JavaScript er et nik til Sun Microsystems Java-sprog, selvom de to sprog er helt forskellige, og ligheden i Navne har ført til betydelig forvirring gennem årene. JavaScript, som har udviklet sig markant, understøttes nu på alle moderne internetsøgere.

JavaScript sprog

JavaScript er et multi-paradigme sprog. Det har krøllet beslag syntaks og semikolon, ligesom C familie af sprog. Den har svag, dynamisk typing og er enten fortolket eller (oftere) just-in-time kompileret. Generelt er JavaScript single-threaded, selv om der er en API til Internetarbejdere, der gør multithreading, og der er begivenheder, asynkrone funktionsopkald og tilbagekald.

JavaScript understøtter objektorienteret programmering ved hjælp af prototyper snarere end den klassearv, der blev brugt i C++, Java og C#, skønt en class syntaks blev føjet til JavaScript ES6 i 2015. JavaScript understøtter også funktionel programmering, herunder lukninger, rekursion og lambdas (anonyme funktioner).

før JavaScript ES6 sproget havde ingen hale opkald optimering; nu gør det, selvom du skal aktivere streng tilstand ('use strict') for at aktivere det, og implementeringen varierer fra bro.ser til bro. ser. Streng tilstand ændrer også semantikken i JavaScript og ændrer nogle normalt tavse fejl for at kaste fejl.

Hvad er der med betegnelsen “ES6”? Navnet på det standardiserede JavaScript-sprog er ECMAScript (ES) efter ECMA International standards body; ES6 kaldes også ECMAScript 2015 (ES2015). ES2020 er i øjeblikket et udkast til standard.

som et simpelt eksempel for at give dig smagen af JavaScript-sproget, her er en kode til at afgøre, om det er dag eller aften og dynamisk sætte den passende hilsen i et navngivet internetelement, der findes i Bro. sererens dokumentobjekt:

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

JavaScript ecosystem

der er mange JavaScript API ‘ er. document API i koden vist ovenfor, og nogle leveres af tredjeparter. Nogle API ‘ er gælder for brug på klientsiden, nogle til brug på serversiden, nogle til brug på skrivebordet og andre til mere end et miljø.

API ‘ er omfatter document object model (DOM) og object model (BOM), Geolocation, Canvas (grafik), HTMLMEDIAELEMENT (lyd og video), og Vibrtc (real-time communications).

tredjeparts API ‘ er bugne. Nogle er grænseflader til fulde applikationer, såsom Google Maps. Andre er værktøjer, der gør JavaScript HTML5 og CSS programmering lettere, som f.eks. Nogle, som Ekspres, er applikationsrammer til specifikke formål; for ekspres er formålet at opbygge Internet-og mobilapplikationsservere på Node.js. En række andre rammer er bygget oven på Ekspres. I 2016 diskuterede jeg 22 JavaScript-rammer i et forsøg på at give mening om, hvad der blev noget af en dyrepark; mange af disse rammer eksisterer stadig i en eller anden form, men flere er gået i vejen.

der er mange flere JavaScript-moduler, over 300.000. For at håndtere det bruger vi pakkeadministratorer, såsom npm, standardpakkeadministratoren for Node.js.

et alternativ til npm er garn, der kom fra Facebook, og hævder fordelen ved deterministiske installationer. Ender, der kalder sig npm lillesøster; og jspm, der bruger ES-moduler (den nyere ECMA-standard for moduler), snarere end CommonJS-moduler, den ældre de-facto standard understøttet af npm.

pakker JavaScript-moduler til statiske aktiver. giver udviklere mulighed for at skrive Node.JS-stil moduler, der kompilerer til brug i bro.ser. Grunt er en Filorienteret JavaScript opgave runner, og gulp er en streaming build system og JavaScript opgave runner. Valget mellem grunt og gulp er ikke afgørende. Jeg har både installeret og bruger den, der blev oprettet til et givet projekt.

for at gøre JavaScript-koden mere pålidelig i mangel af kompilering bruger vi linters. Udtrykket kommer fra C-language lint tool, som var et standard værktøj. JavaScript linters omfatter JSLint, JSHint og ESLint. Du kan automatisere løbende linters efter kodeændringer ved hjælp af en opgaveløber eller din IDE. Igen er valget blandt linterne ikke klart, og jeg bruger den, der blev oprettet til et givet projekt.

når jeg taler om redaktører og ide ‘er, har jeg gennemgået 6 JavaScript ide’ er og 10 JavaScript-redaktører, senest i 2019. Mine bedste valg var Sublim tekst (meget hurtig editor), Visual Studio Code (konfigurerbar editor/IDE) og IDE.

Transpilere giver dig mulighed for at oversætte nogle andre sprog som CoffeeScript eller TypeScript til JavaScript og oversætte moderne JavaScript (såsom ES2015-kode) til et grundlæggende JavaScript, der kører i (næsten) enhver bro.ser. (Alle væddemål er slået fra for tidlige versioner af Internetudforsker.) Den mest almindelige transpiler til moderne JavaScript er Babel.

Hvad er TypeScript?

TypeScript er et typet supersæt af JavaScript, der kompilerer til almindelig JavaScript (ES3 eller højere; det kan konfigureres). Open source TypeScript command-line compiler kan installeres som en Node.JS pakke. TypeScript-understøttelse leveres med Visual Studio 2017 og Visual Studio 2019, Visual Studio-kode og Internetstorm og kan føjes til Sublime tekst, Atom, Eclipse, Emacs og Vim. TypeScript compiler / transpiler tsc er skrevet i TypeScript.

TypeScript tilføjer valgfri typer, klasser og moduler til JavaScript og understøtter værktøjer til store JavaScript-applikationer til enhver bro.ser, til enhver vært, på ethvert operativsystem. Blandt mange andre gevinster for TypeScript er den populære Vinkelramme blevet moderniseret i TypeScript.

typer gør det muligt for JavaScript-udviklere at bruge meget produktive udviklingsværktøjer og praksis som statisk kontrol og koderefactoring, når de udvikler JavaScript-applikationer.

typer er valgfri, og type inference tillader et par typeanmærkninger at gøre en stor forskel for den statiske verifikation af din kode. Typer giver dig mulighed for at definere grænseflader mellem programmelkomponenter og få indsigt i eksisterende JavaScript-bibliotekers opførsel.

TypeScript tilbyder support til de nyeste og udviklende JavaScript-funktioner, herunder dem fra ECMAScript 2015 og fremtidige forslag, såsom async-funktioner og dekoratører, for at hjælpe med at opbygge robuste komponenter.

TypeScript language

TypeScript language accepterer JavaScript som gyldigt, men tilbyder de ekstra muligheder for typeanmærkninger, typekontrol på kompileringstid, klasser og moduler. Alle disse er utroligt nyttige, når du forsøger at producere robuste programmer. Almindelig JavaScript genererer kun fejl ved kørsel, og kun hvis dit program tilfældigvis når en sti med fejl.

TypeScript i 5 minutter tutorial gør fordelene klare. Udgangspunktet er ren JavaScript med en .ts udvidelse:

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

hvis du kompilerer dette med tsc, vil det producere en identisk fil med en .JS udvidelse.

vejledningen har du ændret denne kode på en trinvis måde, tilføjer en type annotation person:string i funktionsdefinitionen, kompilering, test af typekontrol af kompilatoren, tilføjelse af en grænseflade til en person type og endelig tilføjelse af en klasse til Student. Den endelige kode 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 udsendte JavaScript, vil du se, at klasser i TypeScript kun er en stenografi for den samme prototypebaserede arv, der bruges i almindelig JavaScript ES3. Bemærk, at egenskaberne person.firstName og person.lastName automatisk genereres af kompilatoren, når den ser deres public attributter i klassekonstruktøren Student og også overføres til grænsefladen Person. En af de bedste fordele ved typeanmærkninger i TypeScript er, at de genkendes af værktøjerne, såsom Visual Studio-kode:

IDG

hvis der er fejl i koden, mens du redigerer i VS-kode, vil du se fejlmeddelelserne i fanen problemer, for eksempel følgende, Hvis du sletter slutningen af linjen med instantieringen af Student:

IDG

migrering fra JavaScript-tutorial går i detaljer om, hvordan man opgraderer et eksisterende JavaScript-projekt. Spring over installationstrinnene, kernen i metoden er at omdøbe din .JS filer til .ts en ad gangen. (Hvis filen bruger React, en udvidelse, der bruges af React, skal du omdøbe den til .i stedet for .ts.) Stram derefter fejlkontrollen op, og ret fejlene.

du skal blandt andet ændre modulbaserede require() eller define() udsagn til TypeScript import udsagn og tilføje deklarationsfiler til alle biblioteksmoduler, du bruger. Du bør også omskrive dit modul eksport ved hjælp af TypeScript export erklæring. TypeScript understøtter CommonJS moduler, ligesom Node.js gør.

hvis du får fejl om det forkerte antal argumenter, kan du skrive TypeScript-funktion overbelastningssignaturer. Det er en vigtig funktion JavaScript mangler. Endelig skal du tilføje typer til dine egne funktioner og, hvor det er relevant, bruge grænseflader eller klasser.

du behøver normalt ikke at skrive dine egne deklarationsfiler til JavaScript-biblioteker i det offentlige domæne. DefinitelyTyped er et lager af deklarationsfiler, som alle er tilgængelige ved hjælp af npm. Du kan finde erklæringerne ved hjælp af TypeSearch-siden.

når du har konverteret alle dine JavaScript-filer til TypeScript, styrket typerne og elimineret fejlene, har du en meget mere robust kodebase. I stedet for konstant at rette de runtime-fejl, der rapporteres af testere eller brugere, kan du registrere de mest almindelige fejl Statisk.

det er værd at se Anders Hejlsberg diskutere TypeScript. Som du vil høre fra ham, er TypeScript JavaScript, der skaleres.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.