TypeScript vs. JavaScript: zrozumieć różnice

world wide web zasadniczo działa na JavaScript, HTML i CSS. Niestety, JavaScript nie ma kilku funkcji, które pomogłyby programistom używać go do dużych aplikacji. Wpisz Maszynopis.

co to jest JavaScript?

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

Język JavaScript

JavaScript jest językiem wieloparadygmatycznym. Ma składnię nawiasową i średniki, podobnie jak rodzina języków C. Ma słabe, dynamiczne pisanie i jest interpretowane lub (częściej) kompilowane just-in-time. Ogólnie Rzecz Biorąc, JavaScript jest jednowątkowy, chociaż istnieje interfejs API Web Workers, który wykonuje wiele wątków, i istnieją zdarzenia, asynchroniczne wywołania funkcji i wywołania zwrotne.

JavaScript obsługuje programowanie obiektowe przy użyciu prototypów, a nie dziedziczenie klas używane w C++, Java i C#, chociaż składnia class została dodana do JavaScript ES6 w 2015 roku. JavaScript obsługuje również programowanie funkcyjne, w tym zamykanie, rekurencję i Lambda (funkcje anonimowe).

przed JavaScript ES6 język nie miał optymalizacji wywołania ogona; teraz tak, 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 normalnie milczące błędy, aby wyrzucać błędy.

o co chodzi z oznaczeniem „ES6”? Nazwa dla standaryzowanego języka JavaScript to ECMAScript (ES), po Ecma International standards body; ES6 jest również nazywany ECMAScript 2015 (ES2015). ES2020 jest obecnie projektem standardu.

jako prosty przykład, aby dać ci smak języka JavaScript, oto kod, który decyduje, czy jest dzień, czy wieczór i dynamicznie umieszcza odpowiednie powitanie w nazwanym elemencie internetowym znalezionym w obiekcie dokumentu przeglądarki:

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

ekosystem JavaScript

istnieje wiele interfejsów API JavaScript. Niektóre są dostarczane przez przeglądarkę, jak document API w kodzie pokazanym powyżej, a niektóre są dostarczane przez strony trzecie. Niektóre API mają zastosowanie do użycia po stronie klienta, niektóre do użycia po stronie serwera, niektóre do użycia pulpitu, a niektóre do więcej niż jednego środowiska.

interfejsy API przeglądarki obejmują document object model (DOM) i browser object model (BOM), geolokalizację, Canvas (grafika), WebGL (grafika akcelerowana GPU), HTMLMediaElement (audio i wideo) oraz WebRTC (komunikacja w czasie rzeczywistym).

API innych firm obfitują. Niektóre z nich to interfejsy do pełnych aplikacji, takich jak Mapy Google. Inne to narzędzia, które ułatwiają Programowanie JavaScript HTML5 i CSS, takie jak jQuery. Niektóre, jak Express, są frameworkami aplikacji do konkretnych celów; dla Express celem jest budowanie serwerów aplikacji internetowych i mobilnych na węźle.js. Na bazie Express powstało wiele innych frameworków. W 2016 roku omówiłem 22 frameworki JavaScript, aby zrozumieć, co stało się czymś w rodzaju zoo; wiele z tych frameworków nadal istnieje w takiej czy innej formie, ale kilka z nich odeszło na bok.

istnieje wiele 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 węzła.js.

jedną z alternatyw dla npm jest Yarn, który pochodzi z Facebooka i twierdzi, że korzysta z deterministycznych instalacji. Podobne narzędzia to Bower (z Twittera), który zarządza komponentami front-endowymi, a nie modułami węzłów; Ender, który nazywa się młodszą siostrą npm; i jspm, który używa modułów ES (nowszy standard ECMA dla modułów), zamiast modułów CommonJS, starszego standardu de facto wspieranego przez npm.

Pakiet Webpack łączy Moduły JavaScript w statyczne zasoby przeglądarki. Browserify pozwala programistom pisać węzeł.Moduły w stylu js, które kompilują się do użytku w przeglądarce. Grunt jest zorientowany na pliki JavaScript task runner, a gulp jest streaming build system i JavaScript task runner. Wybór między chrząkaniem a łykaniem nie jest decydujący. Zainstalowałem i używam tego, który został skonfigurowany dla danego projektu.

aby uczynić kod JavaScript bardziej wiarygodnym w przypadku braku kompilacji, używamy linterów. Termin pochodzi od narzędzia lint w języku C, które było standardowym narzędziem uniksowym. Lintery JavaScript obejmują JSLint, Jshint i ESLint. Możesz zautomatyzować uruchamianie linterów po zmianach kodu za pomocą funkcji task runner lub IDE. Ponownie wybór linterów nie jest jednoznaczny i korzystam z tego, który został ustawiony dla danego projektu.

mówiąc o edytorach i Idach, przejrzałem 6 JavaScript IDEs i 10 edytorów JavaScript, ostatnio w 2019. Moje najlepsze wybory to Sublime Text (bardzo szybki Edytor), Visual Studio Code (konfigurowalny edytor/IDE) i WebStorm (IDE).

Transpilery pozwalają przetłumaczyć niektóre inne języki, takie jak CoffeeScript lub TypeScript na JavaScript, i przetłumaczyć nowoczesny JavaScript (taki 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 programu Internet Explorer.) Najpopularniejszym transpilerem dla współczesnego JavaScript jest Babel.

co to jest maszynopis?

TypeScript to typowany superset JavaScript, który kompiluje się do zwykłego JavaScript (ES3 lub wyższy; Można go skonfigurować). Kompilator wiersza poleceń typu open source TypeScript może być zainstalowany jako węzeł.pakiet js. Obsługa maszynopisu jest dostarczana z Visual Studio 2017 i Visual Studio 2019, Visual Studio Code i WebStorm i może być dodawana do Sublime Text, Atom, Eclipse, Emacs i Vim. Kompilator/transpiler maszynopisu tsc jest napisany w maszynie.

TypeScript dodaje Opcjonalne typy, klasy i moduły do JavaScript i obsługuje narzędzia dla dużych aplikacji JavaScript dla dowolnej przeglądarki, dla dowolnego hosta, na dowolnym systemie operacyjnym. Wśród wielu innych zwycięstw dla maszynopisu, popularny Angular framework został odnowiony w maszynopisie.

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

typy są opcjonalne, a wnioskowanie typów pozwala na kilka adnotacji typu, aby znacznie zmienić statyczną weryfikację kodu. Typy umożliwiają definiowanie interfejsów między komponentami oprogramowania i uzyskanie wglądu w zachowanie istniejących bibliotek JavaScript.

TypeScript oferuje wsparcie dla najnowszych i zmieniają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 maszynopisu

język maszynopisu akceptuje JavaScript jako poprawny, ale oferuje dodatkowe opcje adnotacji typu, sprawdzania typu podczas kompilacji, klas i modułów. Wszystkie z nich są niezwykle przydatne, gdy próbujesz produkować solidne oprogramowanie. Zwykły JavaScript generuje błędy tylko w czasie wykonywania, a następnie tylko wtedy, gdy program osiągnie ścieżkę z błędami.

samouczek maszynopisu w 5 minut sprawia, że korzyści są jasne. Punktem wyjścia jest czysty JavaScript z .rozszerzenie ts:

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

jeśli skompilujesz to z tsc, utworzy to identyczny Plik z a .rozszerzenie js.

samouczek umożliwia stopniową zmianę tego kodu, dodanie adnotacji typu person:string w definicji funkcji, kompilację, testowanie sprawdzania typu przez kompilator, dodanie interfejsu dla typu person i wreszcie dodanie klasy dla Student. Ostateczny kod to:

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);

kiedy skompilujesz to i spojrzysz na emitowany JavaScript, zobaczysz, że klasy w maszynopisie 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.firstName i person.lastName są automatycznie generowane przez kompilator, gdy widzi ich atrybuty public w konstruktorze klasy Student, a także przenoszone do interfejsu Person. Jedną z najładniejszych zalet adnotacji typu w maszynopisie jest to, że są one rozpoznawane przez narzędzia, takie jak Visual Studio Code:

IDG

jeśli podczas edycji W VS Code występują błędy w kodzie, zobaczysz komunikaty o błędach na karcie problemy, na przykład następujące po usunięciu końca wiersza z instancją Student:

IDG

samouczek migracji z JavaScript zawiera szczegółowe informacje na temat aktualizacji istniejącego projektu JavaScript. Pomijając kroki konfiguracji, sednem metody jest zmiana nazwy .Pliki js do .ts po kolei. (Jeśli Twój plik używa JSX, rozszerzenia używanego przez Reacta, musisz zmienić jego nazwę na .tsx zamiast .ts.) Następnie dokręcić sprawdzanie błędów i naprawić błędy.

między innymi musisz zmienić instrukcje require() lub define() oparte na modułach na instrukcje importowania maszynopisu i dodać pliki deklaracji dla dowolnych modułów bibliotecznych, których używasz. Należy również przepisać eksport modułu za pomocą instrukcji TypeScript export. TypeScript obsługuje moduły CommonJS, takie jak Node.js tak.

jeśli pojawią się błędy dotyczące niewłaściwej liczby argumentów, możesz napisać sygnatury przeciążenia funkcji maszynopisu. Jest to ważna cecha, której brakuje JavaScript. Na koniec, należy dodać typy do własnych funkcji, a w stosownych przypadkach używać interfejsów lub klas.

zwykle nie musisz zapisywać własnych plików deklaracji dla bibliotek JavaScript domeny publicznej. DefinitelyTyped jest 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, poprawieniu typów i wyeliminowaniu błędów, będziesz mieć znacznie bardziej solidną podstawę kodu. Zamiast stale naprawiać błędy uruchomieniowe zgłaszane przez testerów lub użytkowników, będziesz mógł statycznie wykrywać najczęstsze błędy.

warto obejrzeć jak Anders Hejlsberg omawia maszynopis. Jak usłyszysz od niego, maszynopis to JavaScript, który skaluje się.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.