TypeScript a JavaScript: poznaj różnice

Sieć WWW działa w zasadzie w JavaScript, HTML i CSS. Niestety, JavaScript brakuje kilku funkcji, które pomogłyby programistom używać go w aplikacjach na dużą skalę. Wpisz TypeScript.

Co to jest JavaScript?

JavaScript zaczynał jako język skryptowy dla przeglądarki internetowej Netscape Navigator; Brendan Eich napisał prototyp przez okres 10 dni w 1995 roku. Nazwa JavaScript jest ukłonem w stronę języka Java firmy Sun Microsystem, chociaż oba języki są całkiem różne, a podobieństwo nazw doprowadziło na przestrzeni lat do znacznego zamieszania. JavaScript, który znacznie się rozwinął, jest teraz obsługiwany we wszystkich nowoczesnych przeglądarkach internetowych.

Po wprowadzeniu JavaScript po stronie klienta w Netscape Navigator szybko nastąpiło wprowadzenie JavaScript po stronie serwera na serwerach WWW Netscape Enterprise Server i Microsoft IIS. Jakieś 13 lat później Ryan Dahl przedstawił Node.js jako otwarte, wieloplatformowe środowisko uruchomieniowe JavaScript, niezależne od jakiejkolwiek przeglądarki czy serwera WWW.

Język JavaScript

JavaScript jest językiem wieloparadygmatycznym. Ma składnię nawiasów klamrowych i średniki, podobnie jak rodzina języków C. Ma słabe, dynamiczne typowanie i jest albo interpretowana, albo (częściej) kompilowana dokładnie na czas. Ogólnie rzecz biorąc, JavaScript jest jednowątkowy, chociaż istnieje interfejs API Web Workers obsługujący wielowątkowość, a także zdarzenia, wywołania funkcji asynchronicznych i wywołania zwrotne.

JavaScript obsługuje programowanie obiektowe przy użyciu prototypów, a nie dziedziczenia klas używanego w językach C ++, Java i C #, chociaż classw 2015 roku do JavaScript ES6 dodano składnię. JavaScript obsługuje również programowanie funkcjonalne, w tym zamknięcia, rekursję i wyrażenia lambda (funkcje anonimowe).

Przed JavaScript ES6 język nie miał optymalizacji wywołań końcowych; teraz to robi, chociaż musisz włączyć tryb ścisły ( 'use strict'), aby go włączyć, a implementacja różni się w zależności od przeglądarki. Tryb ścisły zmienia również semantykę JavaScript i zmienia niektóre zwykle ciche błędy, aby generować błędy.

O co chodzi z oznaczeniem „ES6”? Nazwa znormalizowanego języka JavaScript to ECMAScript (ES), po organizacji zajmującej się międzynarodowymi normami ECMA; ES6 jest również nazywany ECMAScript 2015 (ES2015). ES2020 to obecnie projekt normy.

Jako prosty przykład pokazujący smak języka JavaScript, oto kod, który decyduje, czy jest dzień, czy wieczór i dynamicznie umieszcza odpowiednie powitanie w nazwanym elemencie sieciowym znajdującym się w obiekcie dokumentu przeglądarki:

var hour = new Date (). getHours ();

var pozdrowienie;

if (godzina <18) {

  powitanie = "Dzień dobry";

} else {

  powitanie = "Dobry wieczór";

}

document.getElementById ("demo"). innerHTML = greeting;

Ekosystem JavaScript

Istnieje wiele interfejsów API JavaScript. Niektóre są dostarczane przez przeglądarkę, na przykład documentAPI w kodzie pokazanym powyżej, a niektóre są dostarczane przez strony trzecie. Niektóre interfejsy API mają zastosowanie do użycia po stronie klienta, inne do użycia po stronie serwera, inne do użycia na komputerach stacjonarnych, a inne do więcej niż jednego środowiska.

Interfejsy API przeglądarki obejmują model obiektowy dokumentu (DOM) i model obiektów przeglądarki (BOM), geolokalizację, kanwę (grafika), WebGL (grafika przyspieszana przez GPU), HTMLMediaElement (audio i wideo) oraz WebRTC (komunikacja w czasie rzeczywistym).

Istnieje wiele interfejsów API innych firm. Niektóre są interfejsami do pełnych aplikacji, takich jak Mapy Google. Inne to narzędzia, które ułatwiają programowanie w JavaScript HTML5 i CSS, takie jak jQuery. Niektóre, jak Express, są strukturami aplikacji do określonych celów; w przypadku Express, celem jest zbudowanie serwerów aplikacji internetowych i mobilnych na Node.js. Na podstawie Express zbudowano wiele innych frameworków. W 2016 roku omawiałem 22 frameworki JavaScript, próbując zrozumieć, co stało się czymś w rodzaju zoo; wiele z tych ram nadal istnieje w takiej czy innej formie, ale kilka odeszło na dalszy plan.

Istnieje znacznie więcej modułów JavaScript, ponad 300 000. Aby sobie z tym poradzić, używamy menedżerów pakietów , takich jak npm, domyślny menedżer pakietów dla Node.js.

Jedną z alternatyw dla npm jest Yarn, który pochodzi z Facebooka i twierdzi, że ma przewagę deterministycznych instalacji. Podobne narzędzia obejmują Bower (z Twittera), który zarządza komponentami front-end, a nie modułami Node; Ender, który nazywa siebie młodszą siostrą npm; i jspm, który wykorzystuje moduły ES (nowszy standard ECMA dla modułów), a nie moduły CommonJS, starszy de facto standard obsługiwany przez npm.

Pakiet WebPack łączy moduły JavaScript w statyczne zasoby przeglądarki. Browserify umożliwia programistom pisanie modułów w stylu Node.js, które kompilują się do użytku w przeglądarce. Grunt to zorientowany na pliki program uruchamiający zadania JavaScript, a gulp to system kompilacji strumieniowej i moduł uruchamiający zadania JavaScript. Wybór między chrząknięciem a łykiem nie jest decydujący. Zainstalowałem i używam tego, który został skonfigurowany dla danego projektu.

Aby kod JavaScript był bardziej niezawodny w przypadku braku kompilacji, używamy linterów. Termin pochodzi od narzędzia lint języka C, które było standardowym narzędziem systemu Unix. Lintery JavaScript obejmują JSLint, JSHint i ESLint. Możesz zautomatyzować uruchamianie lintersów po zmianach kodu za pomocą programu do uruchamiania zadań lub IDE. Ponownie, wybór między linterem nie jest jednoznaczny i używam tego, który został ustawiony dla danego projektu.

Mówiąc o edytorach i IDE, recenzowałem 6 JavaScript IDE i 10 edytorów JavaScript, ostatnio w 2019. Moimi najważniejszymi wyborami były Sublime Text (bardzo szybki edytor), Visual Studio Code (konfigurowalny edytor / IDE) i WebStorm (IDE).

Transpilery umożliwiają przetłumaczenie niektórych innych języków, takich jak CoffeeScript lub TypeScript na JavaScript, i przetłumaczenie nowoczesnego JavaScript (takiego jak kod ES2015) na podstawowy JavaScript, który działa w (prawie) każdej przeglądarce. (Wszystkie zakłady są wyłączone dla wczesnych wersji Internet Explorera). Najpopularniejszym transpilerem dla współczesnego JavaScript jest Babel.

Co to jest TypeScript?

TypeScript to nadzbiór typu JavaScript, który kompiluje się do zwykłego JavaScript (ES3 lub nowszy; można go konfigurować). Kompilator wiersza polecenia TypeScript typu open source można zainstalować jako pakiet Node.js. Obsługa języka TypeScript obejmuje programy Visual Studio 2017 i Visual Studio 2019, Visual Studio Code i WebStorm i można ją dodać do Sublime Text, Atom, Eclipse, Emacs i Vim. Kompilator / transpiler Tsc języka TypeScript jest napisany w języku TypeScript.

TypeScript dodaje opcjonalne typy, klasy i moduły do ​​JavaScript i obsługuje narzędzia do aplikacji JavaScript na dużą skalę dla dowolnej przeglądarki, dowolnego hosta i dowolnego systemu operacyjnego. Wśród wielu innych korzyści dla TypeScript, popularny framework Angular został ulepszony w TypeScript.

Typy umożliwiają programistom JavaScript korzystanie z wysoce produktywnych narzędzi programistycznych i praktyk, takich jak statyczne sprawdzanie i refaktoryzacja kodu podczas tworzenia aplikacji JavaScript.

Typy są opcjonalne, a wnioskowanie o typie pozwala kilku adnotacjom na wprowadzenie dużej różnicy w statycznej weryfikacji kodu. Typy pozwalają zdefiniować interfejsy między komponentami oprogramowania i uzyskać wgląd w zachowanie istniejących bibliotek JavaScript.

TypeScript oferuje obsługę najnowszych i rozwijających się funkcji JavaScript, w tym tych z ECMAScript 2015 i przyszłych propozycji, takich jak funkcje asynchroniczne i dekoratory, aby pomóc w tworzeniu solidnych komponentów.

Język TypeScript

Język TypeScript akceptuje JavaScript jako prawidłowy, ale oferuje dodatkowe opcje adnotacji typu, sprawdzania typu w czasie kompilacji, klas i modułów. Wszystkie te są niezwykle przydatne, gdy próbujesz stworzyć solidne oprogramowanie. Zwykły JavaScript generuje błędy tylko w czasie wykonywania i tylko wtedy, gdy program dotrze do ścieżki z błędami.

Samouczek dotyczący języka TypeScript w 5 minut wyjaśnia korzyści. Punktem wyjścia jest czysty JavaScript z rozszerzeniem .ts:

function greeter (person) {

  return "Witaj", + osoba;

}

let user = "Jane User";

document.body.textContent = greeter (użytkownik);

Jeśli skompilujesz to za pomocą tsc, utworzy identyczny plik z rozszerzeniem .js.

W samouczku możesz zmieniać ten kod w sposób krokowy, dodając adnotację typu person:stringw definicji funkcji, kompilując, testując sprawdzanie typu przez kompilator, dodając interfejs dla persontypu i ostatecznie dodając klasę dla Student. Ostateczny kod to:

class Student {

    fullName: string;

    constructor (public firstName: string, public middleInitial: string,

        public lastName: string) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

interfejs Osoba {

    firstName: string;

    lastName: string;

}

function greeter (person: Person) {

    return "Witaj" + person.firstName + "" + person.lastName;

}

let user = new Student („Jane”, „M.”, „User”);

document.body.textContent = greeter (użytkownik);

Kiedy to skompilujesz i spojrzysz na wyemitowany JavaScript, zobaczysz, że klasy w TypeScript są tylko skrótem dla tego samego dziedziczenia opartego na prototypach, które jest używane w zwykłym JavaScript ES3. Zauważ, że właściwości person.firstNamei person.lastNamesą automatycznie generowane przez kompilator, gdy widzi ich publicatrybuty w Studentkonstruktorze klasy, a także przenoszone do Personinterfejsu. Jedną z najpiękniejszych zalet adnotacji typu w TypeScript jest to, że są rozpoznawane przez narzędzia, takie jak Visual Studio Code:

Jeśli w kodzie występują błędy podczas edytowania w programie VS Code, zobaczysz komunikaty o błędach na karcie Problemy, na przykład następujące po usunięciu końca wiersza z wystąpieniem Student:

Samouczek Migracja z JavaScript zawiera szczegółowe informacje na temat uaktualniania istniejącego projektu JavaScript. Pomijając kroki konfiguracji, sednem metody jest zmiana nazw plików .js na .ts pojedynczo. (Jeśli twój plik używa JSX, rozszerzenia używanego przez React, musisz zmienić jego nazwę na .tsx zamiast .ts.) Następnie zaostrz sprawdzanie błędów i napraw błędy.

Między innymi trzeba zmian opartych na module require()lub define()oświadczenia do maszynopis sprawozdania przywozowych i dodać pliki zgłoszenie o jakichkolwiek modułów bibliotecznych używasz. Należy również przepisać wyeksportowane moduły przy użyciu instrukcji TypeScript export. TypeScript obsługuje moduły CommonJS, podobnie jak Node.js.

Jeśli otrzymujesz błędy dotyczące niewłaściwej liczby argumentów, możesz napisać podpisy przeciążenia funkcji TypeScript. To ważna funkcja, której brakuje JavaScript. Na koniec powinieneś dodać typy do swoich własnych funkcji i, jeśli to konieczne, użyć interfejsów lub klas.

Zwykle nie musisz pisać własnych plików deklaracji dla bibliotek JavaScript domeny publicznej. DefinitelyTyped to repozytorium plików deklaracji, z których wszystkie są dostępne za pomocą npm. Deklaracje można znaleźć na stronie TypeSearch.

Po przekonwertowaniu wszystkich plików JavaScript na TypeScript, wzmocnieniu typów i wyeliminowaniu błędów, będziesz mieć znacznie bardziej solidną bazę kodu. Zamiast ciągłego naprawiania błędów wykonawczych zgłaszanych przez testerów lub użytkowników, będziesz w stanie wykryć większość typowych błędów statycznie.

Warto zobaczyć, jak Anders Hejlsberg omawia TypeScript. Jak usłyszycie od niego, TypeScript to skalowalny JavaScript.