TypeScript vs. JavaScript: förstå skillnaderna

world wide web körs i princip på JavaScript, HTML och CSS. Tyvärr saknar JavaScript flera funktioner som skulle hjälpa utvecklare att använda den för storskaliga applikationer. Ange TypeScript.

Vad är JavaScript?

JavaScript började som ett skriptspråk för webbläsaren Netscape Navigator; Brendan Eich skrev prototypen under en period av 10 dagar 1995. Namnet JavaScript är en nick till Sun Microsystems Java-språk, även om de två språken är ganska olika, och likheten i namn har lett till betydande förvirring genom åren. JavaScript, som har utvecklats avsevärt, stöds nu på alla moderna webbläsare.

JavaScript-språk

JavaScript är ett multiparadigmspråk. Den har syntax för lockigt fäste och semikolon, som C-språkfamiljen. Den har svag, dynamisk typning och tolkas antingen eller (oftare) Just-in-time sammanställs. I allmänhet är JavaScript enkelgängat, även om det finns ett Web Workers API som gör multithreading, och det finns händelser, asynkrona funktionssamtal och återuppringning.

JavaScript stöder objektorienterad programmering med prototyper snarare än klassarvet som används i C++, Java och C#, även om en class – syntax lades till JavaScript ES6 2015. JavaScript stöder också funktionell programmering inklusive stängningar, rekursion och lambdas (anonyma funktioner).

före JavaScript ES6 hade språket ingen svanssamtalsoptimering; nu gör det, även om du måste aktivera strikt läge ('use strict') för att aktivera det, och implementeringen varierar från webbläsare till webbläsare. Strikt läge ändrar också semantiken för JavaScript och ändrar vissa normalt tysta fel för att kasta fel.

vad är det med ”ES6” – beteckningen? Namnet på det standardiserade JavaScript-språket är ECMAScript (ES), efter ECMA International standards body; ES6 kallas också ECMAScript 2015 (ES2015). ES2020 är för närvarande ett utkast till standard.

som ett enkelt exempel för att ge dig smaken av JavaScript-språket, här är en kod för att bestämma om det är dag eller kväll och dynamiskt sätta lämplig hälsning i ett namngivet webbelement som finns i webbläsarens dokumentobjekt:

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

JavaScript ekosystem

det finns många JavaScript API: er. Vissa levereras av webbläsaren, som document API i koden som visas ovan, och vissa levereras av tredje part. Vissa API: er gäller för användning på klientsidan, vissa för användning på serversidan, andra för skrivbordsanvändning och andra för mer än en miljö.

webbläsarens API: er inkluderar document object model (DOM) och browser object model (BOM), Geolocation, Canvas (grafik), WebGL (GPU-accelererad grafik), HTMLMediaElement (ljud och video) och WebRTC (realtidskommunikation).

API: er från tredje part finns i överflöd. Vissa är gränssnitt till fullständiga applikationer, till exempel Google Maps. Andra är verktyg som gör JavaScript HTML5 och CSS-programmering enklare, till exempel jQuery. Vissa, som Express, är applikationsramar för specifika ändamål; för Express är syftet att bygga webb-och mobilapplikationsservrar på Node.js. Ett antal andra ramar har byggts ovanpå Express. I 2016 diskuterade jag 22 JavaScript-ramar i ett försök att förstå vad som blev något av en zoo; många av dessa ramar finns fortfarande i en eller annan form, men flera har gått vid vägen.

det finns många fler JavaScript-moduler, över 300 000. För att hantera det använder vi pakethanterare, till exempel npm, standardpakethanteraren för Node.js.

ett alternativ till npm är garn, som kom från Facebook, och hävdar fördelen med deterministiska installationer. Liknande verktyg inkluderar Bower (från Twitter), som hanterar front-end-komponenter snarare än Nodmoduler; Ender, som kallar sig npm: s lillasyster; och jspm, som använder ES-moduler (den nyare ECMA-standarden för moduler), snarare än CommonJS-moduler, den äldre de facto-standarden som stöds av npm.

Webpack buntar JavaScript-moduler i statiska tillgångar för webbläsaren. Browserify tillåter utvecklare att skriva nod.JS-stil moduler som kompilerar för användning i webbläsaren. Grunt är en Filorienterad JavaScript task runner, och gulp är ett Strömmande byggsystem och JavaScript task runner. Valet mellan grunt och gulp är inte avgörande. Jag har både installerat och använder vilken som helst som ställdes in för ett visst projekt.

för att göra JavaScript-kod mer tillförlitlig i avsaknad av kompilering använder vi linters. Termen kommer från C-language lint tool, som var ett vanligt Unix-verktyg. JavaScript linters inkluderar JSLint, JSHint och ESLint. Du kan automatisera löpande linters efter kodändringar med hjälp av en uppgiftslöpare eller din IDE. Återigen är valet bland linters inte klart, och jag använder vilken som helst som inrättades för ett visst projekt.

på tal om redaktörer och IDEs har jag granskat 6 JavaScript IDEs och 10 JavaScript-redaktörer, senast 2019. Mina bästa val var Sublime Text (very fast editor), Visual Studio Code (konfigurerbar redaktör/IDE) och WebStorm (IDE).

Transpilers låter dig översätta några andra språk som CoffeeScript eller TypeScript till JavaScript och översätta modern JavaScript (som ES2015-kod) till en grundläggande JavaScript som körs i (nästan) vilken webbläsare som helst. (Alla spel är avstängda för tidiga versioner av Internet Explorer.) Den vanligaste transpiler för modern JavaScript är Babel.

Vad är TypeScript?

TypeScript är en typad superset av JavaScript som kompilerar till vanlig JavaScript (ES3 eller högre; Det är konfigurerbart). Kommandoradskompilatorn med öppen källkod kan installeras som en nod.js paket. TypeScript-stöd levereras med Visual Studio 2017 och Visual Studio 2019, Visual Studio Code och WebStorm, och kan läggas till Sublime Text, Atom, Eclipse, Emacs och vim. TypeScript-kompilatorn / transpiler tsc är skriven i TypeScript.

TypeScript lägger till valfria typer, klasser och moduler till JavaScript och stöder verktyg för storskaliga JavaScript-applikationer för alla webbläsare, för alla värdar, på alla operativsystem. Bland många andra vinster för TypeScript har det populära Angular framework moderniserats i TypeScript.

typer gör det möjligt för JavaScript-utvecklare att använda mycket produktiva utvecklingsverktyg och metoder som statisk kontroll och kodrefactoring när de utvecklar JavaScript-applikationer.

typer är valfria, och typ inferens tillåter några typanteckningar för att göra stor skillnad för den statiska verifieringen av din kod. Med typer kan du definiera gränssnitt mellan programvarukomponenter och få insikt i beteendet hos befintliga JavaScript-bibliotek.

TypeScript erbjuder stöd för de senaste och utvecklande JavaScript-funktionerna, inklusive de från ECMAScript 2015 och framtida förslag, som async-funktioner och dekoratörer, för att hjälpa till att bygga robusta komponenter.

TypeScript language

TypeScript-språket accepterar JavaScript som giltigt, men erbjuder ytterligare alternativ för typkommentarer, typkontroll vid kompileringstid, klasser och moduler. Alla dessa är oerhört användbara när du försöker producera robust programvara. Vanligt JavaScript genererar fel endast vid körning, och då bara om ditt program råkar nå en sökväg med fel.

TypeScript i 5 minuter handledning gör fördelarna tydliga. Utgångspunkten är ren JavaScript med en .ts förlängning:

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

om du kompilerar detta med tsc kommer det att producera en identisk fil med en .JS förlängning.

handledningen har du ändra denna kod i ett stegvis sätt, lägga till en typ anteckning person:string i funktionsdefinitionen, kompilering, testning typ kontroll av kompilatorn, lägga till ett gränssnitt för en persontyp, och slutligen lägga till en klass för Student. Den slutliga koden är:

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 sammanställer detta och tittar på det utsända JavaScript ser du att klasser i TypeScript bara är en stenografi för samma prototypbaserade arv som används i vanlig JavaScript ES3. Observera att egenskaperna person.firstName och person.lastName genereras automatiskt av kompilatorn när den ser deras public – attribut i Student – klasskonstruktören och överförs också till Person – gränssnittet. En av de trevligaste fördelarna med typanteckningar i TypeScript är att de känns igen av verktygen, till exempel Visual Studio Code:

IDG

om det finns fel i koden när du redigerar i VS-kod ser du felmeddelandena på fliken problem, till exempel följande om du tar bort slutet av raden med instantiationen av Student:

IDG

migrera från JavaScript handledning går in i detalj om hur man uppgraderar ett befintligt JavaScript-projekt. Hoppa över installationsstegen, kärnan i metoden är att byta namn på din .js filer till .ts en i taget. (Om din fil använder JSX, ett tillägg som används av React, måste du byta namn på det till .tsx snarare än .ts.) Dra sedan upp felkontrollen och åtgärda felen.

bland annat måste du ändra modulbaserade require() eller define() – satser till TypeScript import-satser och lägga till deklarationsfiler för alla biblioteksmoduler du använder. Du bör också skriva om din modul export med TypeScript export uttalande. TypeScript stöder CommonJS-moduler, som Node.js gör.

om du får fel om fel antal argument, kan du skriva TypeScript funktion överbelastning signaturer. Det är en viktig funktion JavaScript saknar. Slutligen bör du lägga till typer i dina egna funktioner och vid behov använda gränssnitt eller klasser.

du behöver vanligtvis inte skriva egna deklarationsfiler för JavaScript-bibliotek med allmän domän. DefinitelyTyped är ett förråd av deklarationsfiler, som alla är tillgängliga med npm. Du kan hitta deklarationerna med hjälp av TypeSearch-sidan.

när du har konverterat alla dina JavaScript-filer till TypeScript, förstärkt typerna och eliminerat felen har du en mycket mer robust kodbas. Istället för att ständigt fixa runtime-fel som rapporterats av testare eller användare kan du upptäcka de vanligaste felen statiskt.

det är värt att titta på Anders Hejlsberg diskutera TypeScript. Som du kommer att höra från honom är TypeScript JavaScript som skalar.

Lämna ett svar

Din e-postadress kommer inte publiceras.