TypeScript vs ES6 vs ES2015

in dit artikel zal ik u een beetje context geven over waarom ES6, ES2015 en TypeScript bestaan en zal ik enkele concrete voorbeelden geven van belangrijke taalfuncties om u te helpen uw mening te vormen over wat de juiste oplossing voor u is.

een korte geschiedenis van ECMA

eerst moeten we onze termen definiëren. JavaScript (of JS) is een implementatie van de ECMAScript (of ES) standaard, die wordt onderhouden door ECMA International, een consortium van tech bedrijven die Adobe, Google, HP, IBM, Intel, Microsoft, PayPal, Yahoo, Apple, Netflix, Twitter – in principe het internet zoals je weet en liefde het. De laatste grote versie van ES werd in 2009 geratificeerd als ES5, dus in 2015, toen de ratificatie van ES6 plaatsvond, was het een enorme deal.Op een gegeven moment in de afgelopen jaren realiseerde ECMA zich dat het web snel verstoord zou worden, ongeacht de technologie erachter. Als reactie, ECMA besloten om ES6 hernoemen als ES2015 om het podium voor jaarlijkse updates voor de taal die een run-time heeft op vrijwel elk stuk hardware geproduceerd in de wereld. Onderweg, Node.JS gebeurde en taalkenmerken van ES zijn nu belangrijker dan ooit omdat JavaScript losjes en dynamisch wordt getypt. We weten allemaal wat er gebeurt als je geen bonafide JavaScript expert bent.

Wat is TypeScript?

u hebt misschien onlangs gehoord van TypeScript als een nieuwe taal die u moet leren, omdat Angular 2 het gebruikt of u hebt er meerdere jaren over gehoord en ervoor gekozen om het te negeren. Als je net als ik bent, verzet je je tegen het leren van nieuwe dingen en veracht je het gebruik van onbewezen technologie. Ik gebruik deze tendensen in mijn voordeel om de cruft uit de JavaScript-Framework-Of-the-Week™ sideshow te filteren. Door selectief te zijn kan ik me veroorloven om diep te duiken in bepaalde technologieën, die de volledige kracht van deze verbazingwekkende technologieën ontsluit, zodat ik productiever kan zijn als ontwikkelaar.

een logo

lang verhaal kort, TypeScript is JavaScript met typedefinities vastgebout erop, maar de kicker is dat de typen optioneel zijn en dat je TypeScript-typings (wat een ding is) in je JavaScript-code kunt gebruiken zonder TypeScript te gebruiken. Ben je al in de war? Er is meer. TypeScript is ook een super-set van ES5, ES2015, ES2016 en toekomstige JavaScript-functionaliteit met de mogelijkheid om te compileren (aka transpile) naar ES3 of ES4 om te kunnen draaien op echt oude browsers.

op BUILD 2016 zei Anders Hejlsberg, de uitvinder van C# en TypeScript, het treffend.: Het komt ontwikkelaars en gebruikers ten goede om een transpiler zoals TypeScript te gebruiken om de compatibiliteit en productiviteit kloof te overbruggen. In maart 2015, iedereen dacht dat zodra de state of web JS ingehaald naar de state of the art JS, zouden we geen transpilers meer nodig.

b

zoals ik al eerder zei, ECMA besloten om een regelmatige update cadans voor JavaScript vast te stellen, wat betekent dat in maart 2016, zelfs als de staat van web JS heeft ingehaald, maar de stand van de techniek JS bleef vooruit. Dit wordt de functie gap genoemd.

c

Transpilers zoals TypeScript, Babel of Traceur streven ernaar deze functiekloof te dichten. TypeScript overtreft de concurrentie vanuit een transpile perspectief omdat Babel of Traceur geweldige tools zijn die je in je IDE/teksteditor kunt installeren of een pijplijn kunt bouwen, maar ze kunnen buggy zijn en debuggen kan problematisch zijn. TypeScript in combinatie met CLI tools en Visual Studio Code biedt een solide ontwikkelingservaring.

Solid Support

TypeScript heeft het voordeel dat het eerste klas ondersteuning krijgt van twee techgiganten, Google en Microsoft. Zowel op BUILD als Ng-Conf 2016 heb ik programmamanagers horen zeggen dat ze zich geen grootschalige JavaScript-ontwikkeling zonder TypeScript kunnen voorstellen. Microsoft heeft dit getest door een nieuw project in TypeScript te implementeren, waarbij een solide IDE en debug-ervaring voor TypeScript zelf wordt gecreëerd, namelijk Visual Studio Code.

d

Google, aan de andere kant, deed iets heel anders. Niet alleen hebben ze TypeScript een standaard voor Angular 2, ze ook volledig herschreven Google AdWords (verantwoordelijk voor $67 miljard aan inkomsten) met behulp van een release candidate versie van Angular 2. Dit niveau van vertrouwen voor een JavaScript-project is ongehoord omdat het vertrouwen inherent is gebakken in de verbazingwekkende statische analyse tools die werden gebouwd rond TypeScript.

Full-Stack TypeScript

bij Excella heb ik de afgelopen 3 jaar gewerkt aan het bouwen van een JavaScript specialty practice, gericht op de voordelen van full-stack JavaScript. Samen met collega ‘ s hebben we een realtime, responsieve web-app uitgebracht en heb ik een paar lezingen gegeven over de algemene architecturale patronen. Dit jaar heb ik dezelfde oefening herhaald voor full-stack TypeScript, wat resulteerde in een nieuwe talk en ik kan melden dat TypeScript de toekomstige JavaScript is waar ik achter kan komen.

de DL

laten we hieronder een aantal specifieke ES2015-en TypeScript-functies bekijken, zodat u zelf kunt beslissen of u ES2015 of TypeScript op uw project wilt gebruiken.

Typings (alleen TypeScript)

u kunt TypeScript vandaag nog gebruiken met behulp van typings. Hieronder is een screenshot van een .js-bestand dat lodash vereist en probeert te gebruiken. Zoals je kunt zien, als je dot raakt krijg je geen suggesties. Afhankelijk van uw IDE of tekstverwerker, kan de suggestielijst het hele universum van bekende JavaScript-functies bevatten die op geen enkele manier gerelateerd zijn aan lodash of een functie die u zojuist een paar regels hierboven hebt getypt.

e

Voer de volgende commando ‘ s uit:

$> NPM installatietypings

$> installeer lodash

en voeg vervolgens het volgende statement toe aan de bovenkant van je .js-bestand:

/// <reference path= ” typings / modules / lodash / index.d. ts” />

Voila, nu heb je alle lodash functies beschikbaar voor u.

f

als je twijfels had over het gebruik van een bepaalde functie, krijg je meer begeleiding van de IDE wanneer je de haakjes opent. U hoeft uw workflow niet te onderbreken en documentatie in uw browser op te halen.

g

typen (alleen TypeScript)

typen kunnen eng, beperkend en een algemene hoofdpijn klinken voor een JavaScript-ontwikkelaar. Afkomstig van a .NET / C # Achtergrond, ik zeker waarderen dat ik niet hoeft te Setup uitgebreide contracten tussen systeemcomponenten voordat ik zelfs een enkele regel van nuttige code te schrijven. Door typen te gebruiken, willen we geen soortgelijke nadelen introduceren, maar in plaats daarvan de voordelen van een typesysteem introduceren. Het is aan jou om het typesysteem niet overmatig te gebruiken.

neem een eenvoudige functie die een parameter neemt en enkele string operaties uitvoert, waarbij een getal wordt geretourneerd.

h

de code lijkt simpel genoeg, dus waarom hebben we types nodig? Overweeg een scenario waarin je de auteur bent van Foo en je weet dat iemand anders Foo zal consumeren of Foo zal elders in de codebase worden gebruikt, gescheiden van de definitie ervan.

in dat geval moet de ontwikkelaar vertrouwen op documentatie, die prima werkt voor goed gedocumenteerde bibliotheken zoals lodash of ze moeten de implementatie voor Foo uitzoeken en de implementatie erachter begrijpen. Immers, hoe moet Ik weten of Foo een string of een nummer retourneert, en omdat dit JavaScript is, retourneert zowel een string als een nummer of helemaal niets?

met behulp van de dubbele punt syntaxis, kunnen we beperken wat bar kan zijn en wat Foo kan retourneren.

i

met deze implementatie weet de consument van Foo dat hij een string moet leveren en krijgt hij er een nummer voor terug. Ze krijgen de juiste code of een rode kronkelende lijn als ze een fout maken. Verder ziet deze TypeScript code, wanneer ze wordt getransporteerd, er precies uit als de code die we oorspronkelijk hebben geschreven.

j

Types zijn een compilatie tijd functie alleen en hebben geen invloed op runtime code. Ik raad je aan om types te gebruiken voor ingewikkelde zakelijke logica en publieke interfaces. De beste manier om te experimenteren met types is door te spelen met hen in de TypeScript playground. Er is geen geplande JavaScript ondersteuning voor types.

decorateurs (TypeScript of planned ES future)

decorateurs worden intensief gebruikt door Angular 2 en het is een kritische eigenschap die het typeverhaal rond maakt. Decorateurs worden aangeduid met de @ syntaxis en kunnen worden gekoppeld aan klassen, methoden of parameters om metadata of gedrag over die klasse, methode of parameter te koppelen tijdens runtime. Angular gebruikt decorateurs om klassen te markeren als @ Component, @Directive, @Pipe of @Injectable, zodat het kader het soort code kan valideren dat de ontwikkelaar van plan is om de runtime-prestaties te optimaliseren.

meer details over TypeScript decorators zijn hier te vinden. Toekomstige JavaScript ondersteuning voor decorateurs is gepland.

klassen (TypeScript of ES2015)

u kunt klassen definiëren in ES2015 en TypeScript. U kunt schrijven constructors en onroerend goed getters en setters. In TypeScript class definities worden ook ingevoerd in het type systeem, zodat de voordelen van het gebruik van klassen duidelijker zijn. Bovendien, met behulp van type parameters op Klasse constructors of methoden, kunt u documentatie gratis te maken, eenvoudig te gebruiken, kader kwaliteit code.

k

Beloften (TypeScript of ES2015)

Beloften zijn native beschikbaar in ES2015 en TypeScript. Hieronder is een voorbeeld van het omwikkelen van een functie met een callback in een belofte. Door gebruik te maken van promises, vereenvoudigen we code die downstream moet worden geschreven. Beloften kunnen worden geketend, parallel uitgevoerd of kunnen worden gebruikt om de uitvoering uit te stellen.

l

zie hieronder hoe connect wordt geconsumeerd:

m

Async / Await (TypeScript of planned ES future)

Async / await pakt op, waar Beloften ons verlaten. We kunnen elke functie als async verklaren, zolang het maar wacht op het resultaat van een belofte. In het onderstaande voorbeeld implementeert connect intern beloften en keert een belofte terug. Wanneer we wachten op connect, achter de schermen de code blijft asynchroon uit te voeren, met callbacks en al, maar aan de ontwikkelaar, vooral bij het debuggen, de code lijkt synchroon uit te voeren.

dit is een big deal, in termen van het vermijden van callback hell en zwaar ingesprongen code. Een ander voordeel is hoe eerder zeer ingewikkelde foutafhandelingsscenario ‘ s nu doodeenvoudig te implementeren zijn.

n

wanneer async / await wordt gebruikt op het laagste niveau van uw toepassing, kunt u de rest van uw toepassing ook op deze manier schrijven, wat uw algehele implementatie vereenvoudigt. Hieronder is een voorbeeld van hoe connect wordt verbruikt.

o

TL;Dr

ES2015 biedt een aantal moderne functies, zoals klassen en beloften, maar het schiet tekort bij het volledig aanpakken van problemen in de echte wereld zoals het vermijden van callbacks, debugging en foutafhandeling uitdagingen veroorzaakt door geneste code, en laat ontwikkelaars nog steeds werken met een transpiler om een zo breed mogelijk publiek te bereiken. TypeScript is een opmerkelijk stukje technologie, het aanbieden van een wereld-klasse geïntegreerde ontwikkeling ervaring. De gratis en cross-platform Visual Studio Code editor is de kers op de taart.

Bekijk Mijn Full-stack TypeScript starter project op Excella Labs en dit voorbeeld project van het TypeScript team om te hacken rond of het creëren van uw grote enterprise applicatie vandaag.

wat zijn uw gedachten en ervaringen met ES2015 of TypeScript?

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.