TypeScript vs. JavaScript: pochopte rozdíly

world wide web v podstatě běží na JavaScriptu, HTML a CSS. JavaScript bohužel postrádá několik funkcí, které by vývojářům pomohly používat jej pro rozsáhlé aplikace. Zadejte TypeScript.

co je JavaScript?

JavaScript začal jako skriptovací jazyk pro webový prohlížeč Netscape Navigator; Brendan Eich napsal prototyp po dobu 10 dnů v roce 1995. Název JavaScript je kývnutí na Sun Microsystem je jazyk Java, ačkoli dva jazyky jsou zcela odlišné, a podobnosti jmen vedlo k značnému zmatku v průběhu let. JavaScript, který se výrazně vyvinul, je nyní podporován ve všech moderních webových prohlížečích.

JavaScript language

JavaScript je multi-paradigma jazyk. Má syntaxi složených závorek a středníky, jako rodina jazyků C. Má slabé, dynamické psaní a je buď interpretován, nebo (častěji) just-in-time kompilován. Obecně platí, že JavaScript je single-threaded, i když je Web Workers API, které se multithreading, a tam jsou události, asynchronní volání funkcí, a zpětná volání.

JavaScript podporuje objektově orientované programování pomocí prototypů spíše než dědičnost třídy používané v C++, Java A C#, ačkoli syntaxe class byla přidána do JavaScriptu ES6 v 2015. JavaScript také podporuje funkční programování včetně uzávěrů, rekurze a lambdas (anonymní funkce).

před JavaScriptem ES6 nebyl jazyk optimalizován; nyní to dělá, i když je třeba zapnout přísný režim ('use strict'), abyste jej mohli povolit, a implementace se liší od prohlížeče k prohlížeči. Přísný režim také mění sémantiku JavaScriptu a mění některé normálně tiché chyby, aby házely chyby.

co je s označením“ ES6″? Název standardizované JavaScript je jazyk ECMAScript (ES), po ECMA Mezinárodním normalizačním orgánem; ES6 se také nazývá ECMAScript 2015 (ES2015). ES2020 je v současné době návrhem standardu.

Jako jednoduchý příklad, aby vám chuť jazyk JavaScript, tady je nějaký kód, aby o tom, zda je den nebo večer a dynamicky dát odpovídající pozdrav do pojmenované webové prvek nalezen v prohlížeči objektu dokumentu:

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

JavaScript ekosystému

Tam jsou četné JavaScript Api. Některé jsou dodávány prohlížečem, jako document API v kódu uvedeném výše, a některé jsou dodávány třetími stranami. Některá rozhraní API se vztahují na použití na straně klienta, některé na straně serveru, některé na použití na ploše a některé na více než jedno prostředí.

Prohlížeč rozhraní Api zahrnují objektový model dokumentu (DOM) a prohlížeč object model (BOM), Geolocation, Plátno (grafika), WebGL (GPU-accelerated graphics), HTMLMediaElement (audio a video), a WebRTC (komunikace v reálném čase).

API třetích stran oplývají. Některé jsou rozhraní pro plné aplikace, například Mapy Google. Jiné jsou nástroje, které usnadňují programování JavaScriptu HTML5 a CSS, například jQuery. Některé, jako Express, jsou aplikační rámce pro konkrétní účely; pro Express, účelem je stavět webové a mobilní aplikační servery na Node.js. Na vrcholu Express byla postavena řada dalších rámců. V roce 2016, jsem se zmínil 22 JavaScript rámců, ve snaze pochopit, co se stává něco jako zoo; mnoho z těchto rámců stále existují v té či oné podobě, ale několik se už na vedlejší koleji.

existuje mnoho dalších modulů JavaScript, přes 300,000. Abychom to vyřešili, používáme správce balíčků, například npm, výchozí správce balíčků pro uzel.js.

jednou z alternativ k npm je příze, která pochází z Facebook, a tvrdí, že výhoda deterministických instalací. Podobné nástroje patří Altánek (z Twitteru), která spravuje front-end komponent, spíše než Uzlu moduly; Ender, který se nazývá npm je mladší sestra, a jspm, který používá ES modulů (novější ECMA standard pro moduly), spíše než CommonJS modules, starší de-facto standard podporovaný npm.

Webpack sdružuje moduly JavaScript do statických aktiv pro prohlížeč. Browserify umožňuje vývojářům psát uzel.moduly ve stylu js, které kompilují pro použití v prohlížeči. Grunt je běžec úloh JavaScriptu orientovaný na soubory a gulp je streamovací systém a běžec úloh JavaScriptu. Volba mezi gruntem a douškem není rozhodující. Nainstaloval jsem a používám ten, který byl nastaven pro daný projekt.

aby byl kód JavaScript spolehlivější při absenci kompilace, používáme lintery. Termín pochází z nástroje lint v jazyce C, což byl standardní unixový nástroj. JavaScript linters patří JSLint, JSHint, a ESLint. Běžící lintery můžete automatizovat po změnách kódu pomocí běžce úloh nebo IDE. Opět platí, že výběr mezi lintery není jednoznačný a používám ten, který byl nastaven pro daný projekt.

když už mluvíme o editorech a IDE, zkontroloval jsem 6 javascriptových IDE a 10 editorů JavaScriptu, naposledy v roce 2019. Moje nejlepší volby byly Sublime Text (velmi rychlý editor), Visual Studio Code (konfigurovatelný editor / IDE) a WebStorm (IDE).

Transpilers umožní přeložit některé jiné jazyky jako CoffeeScript nebo TypeScript JavaScript, a přeložit moderní JavaScript (jako ES2015 kódu) do základní JavaScript, který běží v (téměř) libovolném prohlížeči. (Všechny sázky jsou vypnuty pro rané verze aplikace Internet Explorer.) Nejběžnější transpiler pro moderní JavaScript je Babel.

co je to TypeScript?

TypeScript je zadaná nadmnožina JavaScriptu, která se kompiluje na prostý JavaScript (ES3 nebo vyšší; je konfigurovatelný). Kompilátor příkazového řádku s otevřeným zdrojovým kódem lze nainstalovat jako uzel.balíček js. Podpora TypeScript přichází s Visual Studio 2017 a Visual Studio 2019, Visual Studio Code a WebStorm a může být přidána do Sublime Text, Atom, Eclipse, Emacs a Vim. TypeScript compiler / transpiler tsc je napsán v TypeScript.

TypeScript přidává do JavaScriptu volitelné typy, třídy a moduly a podporuje nástroje pro rozsáhlé JavaScript aplikace pro libovolný prohlížeč, pro všechny hostitele, na jakémkoli operačním systému. Mezi mnoha dalšími výhrami pro TypeScript byl populární úhlový rámec přepracován v TypeScript.

typy umožňují vývojářům JavaScriptu používat vysoce produktivní vývojové nástroje a postupy, jako je statická kontrola a refaktorování kódu při vývoji aplikací JavaScript.

typy jsou volitelné, a typ inference umožňuje několik Typ anotací, aby se velký rozdíl na statické ověření kódu. Typy umožňují definovat rozhraní mezi softwarovými komponentami a získat přehled o chování existujících knihoven JavaScriptu.

Strojopis nabízí podporu pro nejnovější a vyvíjí JavaScript funkce, včetně těch z ECMAScript 2015 a budoucí návrhy, jako je asynchronní funkce a dekoratéry, pomoci vybudovat robustní komponenty.

jazyk TypeScript

jazyk TypeScript přijímá JavaScript jako platný, ale nabízí další možnosti anotací typu, kontroly typu v době kompilace, tříd a modulů. Všechny tyto jsou nesmírně užitečné, když se snažíte vyrábět robustní software. Prostý JavaScript generuje chyby pouze za běhu, a pak pouze v případě, že váš program náhodou dosáhne cesty s chybami.

strojopis za 5 minut tutoriál objasňuje výhody. Výchozím bodem je čistý JavaScript s.rozšíření ts:

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

pokud to zkompilujete pomocí tsc, vytvoří se identický soubor s a .rozšíření js.

tutorial má změnit tento kód postupně módy, přidání typu anotace person:string v definici funkce, sestavení, testování kontrola typu kompilátorem, přidání rozhraní pro person typ, a nakonec přidání třídy pro Student. Konečný kód je:

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

Při kompilaci to a podívejte se na emitovaného JavaScript, uvidíte, že třídy na Stroji jsou jen zkratka pro stejný prototyp založený na dědictví, který se používá v prostém JavaScript ES3. Všimněte si, že vlastnosti person.firstName a person.lastName jsou automaticky generovány kompilátorem, když to vidí jejich public atributy v Student konstruktoru třídy, a také přeneseny do Person rozhraní. Jeden z nejhezčích výhody typ poznámky na psacím Stroji, je, že jsou uznávané nástroje, jako je Visual Studio Kód:

IDG

Pokud tam jsou chyby v kódu, jak si upravit ve VS Kódu, uvidíte chybové zprávy Problémy kartě, například následující, pokud jste odstranit na konci řádku s instance Student:

IDG

migrace z JavaScriptu tutoriálu jde do podrobností o tom, jak upgradovat existující projekt JavaScript. Přeskočení kroků nastavení, jádrem metody je přejmenování .soubory js do .ts jeden po druhém. (Pokud váš soubor používá JSX, příponu používanou společností React, budete ji muset přejmenovat na .tsx spíše než.ts.) Pak zpřísnit kontrolu chyb a opravit chyby.

mimo jiné budete muset změnit příkazy require() nebo define() založené na modulech na příkazy importu TypeScript a přidat soubory deklarace pro všechny moduly knihovny, které používáte. Export modulů byste také měli přepsat pomocí příkazu TypeScript export. TypeScript podporuje CommonJS moduly, jako Node.js Ano.

pokud se vyskytnou chyby ohledně nesprávného počtu argumentů, můžete psát podpisy přetížení funkce strojopisu. To je důležitá funkce, kterou JavaScript postrádá. Nakonec byste měli přidat typy do svých vlastních funkcí a případně použít rozhraní nebo třídy.

obvykle nemusíte psát vlastní deklarační soubory pro veřejné knihovny JavaScriptu. DefinitelyTyped je úložiště deklaračních souborů, z nichž všechny jsou přístupné pomocí npm. Deklarace můžete najít pomocí stránky TypeSearch.

Jakmile jste převést všechny vaše soubory jazyka JavaScript, aby Strojopis, zvýšena typy, a eliminovat chyby, budete mít mnohem více robustní kód základny. Místo toho, abyste neustále opravovali chyby runtime hlášené testery nebo uživateli, budete moci staticky detekovat nejčastější chyby.

stojí za to sledovat Anderse Hejlsberg diskutovat o strojopisu. Jak od něj uslyšíte, TypeScript je JavaScript, který se měří.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.