TypeScript vs ES6 vs ES2015

w tym artykule przedstawię trochę kontekstu na temat tego, dlaczego ES6, ES2015 i TypeScript istnieją i dostarczę konkretnych przykładów kluczowych funkcji językowych, które pomogą Ci zdecydować się na właściwe rozwiązanie dla Ciebie.

Krótka historia ECMA

po pierwsze, musimy zdefiniować nasze Warunki. JavaScript (lub JS) jest implementacją standardu ECMAScript (lub ES), który jest utrzymywany przez ECMA International, konsorcjum firm technologicznych, które obejmują Adobe, Google, HP, IBM, Intel, Microsoft, PayPal, Yahoo, Apple, Netflix, Twitter – w zasadzie internet, jaki znasz i kochasz. Ostatnia większa wersja ES została ratyfikowana w 2009 r.jako ES5, więc w 2015 r., kiedy doszło do ratyfikacji ES6, była to ogromna sprawa.

w pewnym momencie w ciągu ostatnich kilku lat ECMA zdało sobie sprawę, że sieć zostanie szybko przerwana, niezależnie od technologii stojącej za nią. W odpowiedzi ECMA zdecydowało się zmienić nazwę ES6 na ES2015, aby ustawić scenę dla corocznych aktualizacji języka, który ma czas działania na prawie każdym sprzęcie produkowanym na świecie. Po drodze, Node.Js stało się i funkcje językowe ES są teraz ważniejsze niż kiedykolwiek, ponieważ JavaScript jest luźno i dynamicznie typowany. Wszyscy wiemy, co się dzieje, gdy nie jesteś ekspertem JavaScript bonafide.

co to jest TypeScript?

być może ostatnio słyszałeś o maszynopisie jako nowym języku, którego musisz się nauczyć, ponieważ Angular 2 go używa lub słyszałeś o nim kilka lat i zdecydowałeś się go zignorować. Jeśli jesteś taki jak ja, opierasz się nauce nowych rzeczy i gardzisz używaniem niesprawdzonej technologii. W rzeczywistości korzystam z tych tendencji na moją korzyść, aby odfiltrować cruft z pokazu sideshow JavaScript-Framework-of-the-Week™. Będąc selektywnym, mogę pozwolić sobie na głębokie zagłębienie się w pewne technologie, co odblokowuje pełną moc tych niesamowitych technologii, dzięki czemu mogę być bardziej produktywny jako programista.

logo

krótko mówiąc, TypeScript to JavaScript z przykręconymi definicjami typów, ale kicker jest to, że typy są opcjonalne i możesz używać TypeScript (co jest rzeczą) w kodzie JavaScript bez użycia TypeScript. Zdezorientowany? To nie wszystko. TypeScript jest również super-zestawem ES5, ES2015, ES2016 i przyszłych funkcji JavaScript z możliwością kompilacji w dół (aka transpile) do ES3 lub ES4, aby móc uruchomić na naprawdę starożytnych przeglądarkach.

na BUILD 2016 Anders Hejlsberg, wynalazca C# i maszynopisu, trafnie to ujął: Przynosi programistom i użytkownikom korzyści w korzystaniu z transpilera takiego jak TypeScript, aby wypełnić lukę w zgodności i produktywności. W marcu 2015 r. wszyscy myśleli, że gdy stan web js dogoni najnowocześniejszy JS, nie będziemy już potrzebować transpilerów.

b

jak już wspomniałem wcześniej, ECMA zdecydowało się przyjąć regularną aktualizację dla JavaScript, co oznacza, że w marcu 2016 r., nawet jeśli stan web js nadrobił, ale stan js sztuki nadal posuwał się naprzód. Jest to tzw. luka funkcji.

c

Transpilery takie jak TypeScript, Babel czy Traceur mają na celu zamknięcie tej luki w funkcjach. TypeScript przyćmiewa konkurencję z perspektywy transpile, ponieważ podczas gdy Babel lub Traceur są świetnymi narzędziami, które można zainstalować w edytorze IDE / tekstu lub zbudować potok, mogą one być buggy i debugowanie może być problematyczne. TypeScript w połączeniu z narzędziami CLI i kodem Visual Studio oferuje solidne doświadczenie programistyczne.

solidne wsparcie

TypeScript ma tę zaletę, że otrzymuje pierwszorzędne wsparcie dwóch gigantów technologicznych, Google i Microsoft. Zarówno w BUILD, jak i w Ng-Conf 2016 słyszałem, jak menedżerowie programów mówią, że nie wyobrażają sobie rozwoju JavaScript na dużą skalę bez maszynopisu. Microsoft przetestował to, wdrażając nowy projekt w maszynopisie, w procesie tworzenia solidnego IDE i debugowania dla samego maszynopisu, a mianowicie Visual Studio Code.

d

z drugiej strony Google zrobiło coś zupełnie innego. Nie tylko uczynili TypeScript domyślnym dla Angular 2, ale także całkowicie przepisali Google AdWords (odpowiedzialny za 67 miliardów dolarów przychodu) za pomocą wersji release candidate dla Angular 2. Ten poziom zaufania dla każdego projektu JavaScript jest niespotykany, ponieważ zaufanie jest z natury pieczone w niesamowitych narzędziach do analizy statycznej, które zostały zbudowane wokół maszynopisu.

Full-Stack TypeScript

w Excella przez ostatnie 3 lata pracowałem nad stworzeniem praktyki specjalizującej się w JavaScript, koncentrując się na korzyściach płynących z pełnego stosu JavaScript. Wraz z kolegami wydaliśmy responsywną aplikację internetową w czasie rzeczywistym i wygłosiłem kilka wykładów na temat ogólnych wzorców architektonicznych. W tym roku powtórzyłem to samo ćwiczenie dla maszynopisu z pełnym stosem, co zaowocowało nowym wykładem i mogę zgłosić, że maszynopis to przyszły JavaScript, który mogę uzyskać.

DL

przyjrzyjmy się niektórym konkretnym funkcjom ES2015 i maszynopisu poniżej, abyś mógł sam zdecydować, czy użyć ES2015 lub maszynopisu w swoim projekcie.

typowania (tylko TypeScript)

możesz zacząć używać maszynopisu już dziś, korzystając z typowań. Poniżej znajduje się zrzut ekranu .plik js, który wymaga i próbuje użyć lodash. Jak widzisz, po naciśnięciu kropki nie masz żadnych sugestii. W zależności od Twojego IDE lub edytora tekstu, lista sugestii może zawierać cały wszechświat znanych funkcji JavaScript, które nie są w żaden sposób powiązane z lodashem lub jakąś funkcją, którą właśnie wpisałeś kilka linii powyżej.

e

uruchom następujące polecenia:

$> typowanie instalacji npm

$> typingi instalują lodash

, a następnie dodają następującą instrukcję do góry .plik js:

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

Voila, teraz masz wszystkie funkcje lodash dostępne dla ciebie.

f

jeśli masz jakiekolwiek wątpliwości, jak korzystać z określonej funkcji, otrzymasz więcej wskazówek od IDE po otwarciu nawiasu. Nie musisz przerywać przepływu pracy i pobierać dokumentacji w przeglądarce.

g

typy (tylko TypeScript)

typy mogą wydawać się przerażające, ograniczające i ogólne bóle głowy dla programisty JavaScript. Pochodzi z … Net / C# background, zdecydowanie doceniam to, że nie muszę konfigurować skomplikowanych kontraktów między komponentami systemu, zanim nawet napiszę jedną linię użytecznego kodu. Używając typów, nie chcemy wprowadzać podobnych wad, ale zamiast tego Wprowadzamy plusy systemu pisania. To do ciebie, aby nie nadużywać systemu pisania.

weź prostą funkcję, która pobiera parametr i wykonuje pewne operacje łańcuchowe, zwracając liczbę.

h

kod wydaje się dość prosty, więc po co nam typy? Rozważ scenariusz, w którym jesteś autorem Foo i wiesz, że ktoś inny będzie konsumował Foo lub Foo będzie używane gdzie indziej w kodzie oddzielonym od jego definicji.

w takim przypadku programista musi polegać na dokumentacji, która działa dobrze w dobrze udokumentowanych bibliotekach, takich jak lodash, lub będzie musiał poszukać implementacji dla Foo i zrozumieć implementację stojącą za nią. Po tym wszystkim, skąd mam wiedzieć, czy Foo zwraca ciąg lub liczbę, a ponieważ to jest JavaScript, zwracając zarówno ciąg, jak i liczbę lub w ogóle nic?

używając składni dwukropka, możemy ograniczyć to, co może być paskiem, a co może zwrócić Foo.

i

dzięki tej implementacji konsument Foo wie, że musi dostarczyć ciąg znaków, a w zamian otrzyma numer. Otrzymają poprawne uzupełnienie kodu lub czerwoną linię, jeśli popełnią błąd. Ponadto, kod maszynopisu, po transpilacji, wygląda dokładnie tak jak kod, który pierwotnie napisaliśmy.

j

typy są tylko funkcją czasu kompilacji i nie mają wpływu na kod uruchomieniowy. Zalecam używanie typów dla skomplikowanej logiki biznesowej i publicznych interfejsów. Najlepszym sposobem na eksperymentowanie z typami jest zabawa z nimi na Maszynopisowym placu zabaw. Nie ma planowanej obsługi JavaScript dla typów.

dekoratory (maszynopis lub planowana przyszłość ES)

dekoratory są w dużym stopniu wykorzystywane przez Angular 2 i jest to krytyczna funkcja, która dopełnia historię typu. Dekoratory są oznaczone składnią @ i mogą być dołączane do klas, metod lub parametrów, aby dołączyć metadane lub zachowanie dotyczące tej klasy, metody lub parametru w czasie wykonywania. Angular używa dekoratorów do oznaczania klas jako @Component, @Directive, @Pipe lub @Injectable, aby framework mógł zweryfikować rodzaj kodu, który programista zamierza dostarczyć, aby zoptymalizować wydajność środowiska wykonawczego.

więcej szczegółów na temat dekoratorów maszynopisu można znaleźć tutaj. Planowana jest przyszła obsługa JavaScript dla dekoratorów.

klasy (TypeScript lub ES2015)

możesz definiować klasy w ES2015 i TypeScript. Możesz pisać konstruktory i gettery własności i setery. W TypeScript definicje klas są również wprowadzane do systemu typów, więc korzyści z używania klas są wyraźniejsze. Ponadto, wykorzystując parametry typu w konstruktorach klas lub metodach, można tworzyć dokumentację za darmo, Łatwy w użyciu, kod jakości frameworka.

k

obietnice (TypeScript lub ES2015)

obietnice są dostępne natywnie w ES2015 i TypeScript. Poniżej znajduje się przykład zawijania funkcji z wywołaniem zwrotnym w obietnicę. Korzystając z obietnic, upraszczamy kod, który musi zostać napisany w dalszej kolejności. Obietnice mogą być łańcuchowe, wykonywane równolegle lub mogą być używane do odroczenia wykonania.

l

zobacz, jak connect jest używany poniżej:

m

Async / Waiting (TypeScript lub planowane es future)

async / waiting odbiera, gdzie obietnice pozostawiają nas. Możemy zadeklarować dowolną funkcję jako asynchroniczną, o ile oczekuje ona na wynik obietnicy. W poniższym przykładzie connect wewnętrznie implementuje obietnice i zwraca obietnicę. Kiedy czekamy na połączenie, Za kulisami kod nadal wykonuje się asynchronicznie, z wywołaniami zwrotnymi i wszystkimi, jednak dla programisty, zwłaszcza podczas debugowania, kod wydaje się wykonywać synchronicznie.

to jest wielka sprawa, jeśli chodzi o unikanie callback hell i mocno wcięty kod. Kolejną korzyścią jest to, jak wcześniej bardzo skomplikowane scenariusze obsługi błędów stają się teraz ŚMIERTELNIE PROSTE do wdrożenia.

n

gdy async / await jest używany na najniższym poziomie aplikacji, pozwala na napisanie reszty aplikacji również w ten sposób, upraszczając ogólną implementację. Poniżej znajduje się przykład użycia connect.

o

TL;DR

ES2015 oferuje kilka nowoczesnych funkcji, takich jak klasy i obietnice, ale nie jest w stanie w pełni rozwiązać rzeczywistych problemów związanych z rozwojem, takich jak unikanie wywołań zwrotnych, debugowanie i problemy z obsługą błędów spowodowane przez zagnieżdżony kod, i nadal pozostawiając programistom pracę z transpilerem, aby dotrzeć do jak najszerszej publiczności. TypeScript to niezwykła technologia, oferująca światowej klasy zintegrowane doświadczenie programistyczne. Darmowy i wieloplatformowy edytor kodu Visual Studio to wisienka na torcie.

Sprawdź mój pełny projekt startera maszynopisu w Excella Labs i ten przykładowy projekt od zespołu maszynopisu do hakowania lub tworzenia aplikacji dla dużych przedsiębiorstw już dziś.

jakie są Twoje przemyślenia i doświadczenia z ES2015 lub maszynopisem?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.