Celosvětový web v zásadě funguje 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 strojopis.
Co je JavaScript?
JavaScript začínal 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ím jazyka Java Sun Microsystem, i když se tyto dva jazyky značně liší a podobnost názvů v průběhu let vedla k významnému zmatku. JavaScript, který se významně vyvinul, je nyní podporován ve všech moderních webových prohlížečích.
Po zavedení JavaScriptu na straně klienta v Netscape Navigator rychle následovalo zavedení JavaScriptu na straně serveru ve webových serverech Netscape Enterprise Server a Microsoft IIS. Asi o 13 let později představil Ryan Dahl Node.js jako open source, multiplatformní běhové prostředí JavaScriptu nezávislé na jakémkoli prohlížeči nebo webovém serveru.
Jazyk JavaScript
JavaScript je jazykem více paradigmat. Má syntaxi složených závorek a středníky, jako je rodina jazyků C. Má slabé, dynamické psaní a je buď interpretováno, nebo (častěji) kompilováno just-in-time. Obecně je JavaScript jednovláknový, i když existuje rozhraní Web Workers API, které provádí více vláken, a existují události, asynchronní volání funkcí a zpětná volání.
JavaScript podporuje objektově orientované programování pomocí prototypů namísto dědičnosti třídy používané v C ++, Java a C #, ačkoli třída syntaxe byla přidána k JavaScriptu ES6 v roce 2015. JavaScript také podporuje funkční programování včetně uzávěrů, rekurze a lambdas (anonymní funkce).
Před spuštěním JavaScriptu ES6 jazyk neměl optimalizaci koncového volání; teď ano, i když je třeba zapnout přísný režim ('use strict') 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é běžně tiché chyby tak, aby chyby vyvolávaly.
Co je s označením „ES6“? Název standardizovaného jazyka JavaScript je ECMAScript (ES), podle orgánu pro mezinárodní standardy ECMA; ES6 se také nazývá ECMAScript 2015 (ES2015). ES2020 je v současné době návrh standardu.
Jako jednoduchý příklad, který vám poskytne chuť jazyka JavaScript, uvádíme několik kódů, které vám pomohou rozhodnout, zda je den nebo večer, a dynamicky umístit příslušný pozdrav do pojmenovaného webového prvku, který se nachází v objektu dokumentu prohlížeče:
var hodina = nový Date (). getHours ();var pozdrav;
pokud (hodina <18) {
pozdrav = "Dobrý den";
} else {
pozdrav = "Dobrý večer";
}
document.getElementById ("demo"). innerHTML = pozdrav;
Ekosystém JavaScriptu
Existuje mnoho API JavaScriptu. Některé dodává prohlížeč, například dokument API v kódu zobrazeném výše a některá jsou dodávána třetími stranami. Některá rozhraní API platí pro použití na straně klienta, jiná pro použití na serveru, jiná pro použití na ploše a jiná pro více než jedno prostředí.
Rozhraní API prohlížeče zahrnují objektový model dokumentu (DOM) a objektový model prohlížeče (BOM), Geolocation, Canvas (grafika), WebGL (grafika s akcelerací GPU), HTMLMediaElement (zvuk a video) a WebRTC (komunikace v reálném čase).
Rozhraní API třetích stran jsou hojná. Některá jsou rozhraní k plným aplikacím, jako jsou Mapy Google. Jiné jsou nástroje, které usnadňují programování JavaScriptu HTML5 a CSS, například jQuery. Některé, například Express, jsou aplikační rámce pro specifické účely; pro Express je účelem stavět webové a mobilní aplikační servery na Node.js. Na vrcholu Expressu byla postavena řada dalších frameworků. V roce 2016 jsem diskutoval o 22 rámcích JavaScriptu ve snaze pochopit, co se stalo něčím ze zoo; mnoho z těchto rámců stále existuje v té či oné podobě, ale některé jdou stranou.
Existují mnoho více modulů JavaScript, více než 300 000. K řešení toho používáme správci balíků, například npm, výchozí správce balíčků pro Node.js.
Jednou z alternativ k npm je Yarn, která pochází z Facebooku a tvrdí výhodu deterministických instalací. Podobné nástroje zahrnují Bower (z Twitteru), který spravuje front-end komponenty spíše než Node moduly; Ender, který si říká malá sestra npm; a jspm, který používá moduly ES (novější standard ECMA pro moduly), spíše než moduly CommonJS, starší de-facto standard podporovaný npm.
Webpack balíčky modulů JavaScript do statických datových zdrojů pro prohlížeč. Browserify umožňuje vývojářům psát moduly ve stylu Node.js, které se kompilují pro použití v prohlížeči. Grunt je souborově orientovaný běžec úloh JavaScriptu a gulp je systém sestavování streamování 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 linters. Termín pochází z nástroje pro uvolňování vláken v jazyce C, což byl standardní unixový nástroj. Mezi JavaScriptové lintery patří JSLint, JSHint a ESLint. Běžící lintery po změnách kódu můžete automatizovat pomocí běžce úloh nebo vašeho IDE. Volba mezi lintery opět není jasná a já používám ten, který byl nastaven pro daný projekt.
Když už mluvíme o editorech a IDE, zkontroloval jsem 6 IDE JavaScriptu a 10 editorů JavaScriptu, naposledy v roce 2019. Moje nejlepší možnosti byly Sublime Text (velmi rychlý editor), Visual Studio Code (konfigurovatelný editor / IDE) a WebStorm (IDE).
Transpilátory umožňují překládat některé další jazyky, například CoffeeScript nebo TypeScript, do JavaScriptu a překládat moderní JavaScript (například kód ES2015) do základního JavaScriptu, který běží v (téměř) libovolném prohlížeči. (U dřívějších verzí aplikace Internet Explorer jsou všechny sázky vypnuté.) Nejběžnějším překladačem pro moderní JavaScript je Babel.
Co je TypeScript?
TypeScript je typová nadmnožina JavaScriptu, která se kompiluje s prostým JavaScriptem (ES3 nebo vyšší; je konfigurovatelný). Kompilátor příkazového řádku s otevřeným zdrojovým kódem TypeScript lze nainstalovat jako balíček Node.js. Podpora TypeScript přichází s Visual Studio 2017 a Visual Studio 2019, Visual Studio Code a WebStorm a lze ji přidat do Sublime Text, Atom, Eclipse, Emacs a Vim. Překladač / transportér TypeScript 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é aplikace JavaScriptu pro libovolný prohlížeč, pro libovolného hostitele a pro libovolný operační systém. Mezi mnoha dalšími výhrami TypeScript byl v TypeScript přepracován populární rámec Angular.
Typy umožňují vývojářům JavaScriptu při vývoji aplikací JavaScriptu používat vysoce produktivní vývojové nástroje a postupy, jako je statická kontrola a refaktorování kódu.
Typy jsou volitelné a odvození typu umožňuje několika anotacím typu udělat velký rozdíl ve statickém ověření vašeho kódu. Typy umožňují definovat rozhraní mezi softwarovými komponentami a získat přehled o chování existujících knihoven JavaScriptu.
TypeScript nabízí podporu pro nejnovější a vyvíjející se funkce JavaScriptu, včetně těch z ECMAScript 2015 a budoucích návrhů, jako jsou asynchronní funkce a dekoratéry, které pomáhají vytvářet robustní komponenty.
Jazyk strojopisu
Jazyk TypeScript přijímá JavaScript jako platný, ale nabízí další možnosti anotací typů, kontroly typu v době kompilace, tříd a modulů. Všechny tyto možnosti jsou nesmírně užitečné, pokud se pokoušíte vytvořit robustní software. Prostý JavaScript generuje chyby pouze za běhu, a to pouze v případě, že váš program náhodou dosáhne cesty s chybami.
Výukový program TypeScript za 5 minut objasňuje výhody. Výchozím bodem je čistý JavaScript s příponou .ts:
funkce zdravější (osoba) { návrat "Dobrý den," + osoba;
}
let user = "Uživatel Jane";
document.body.textContent = zdravější (uživatel);
Pokud to zkompilujete s tsc, vytvoří se stejný soubor s příponou .js.
V tomto kurzu jste tento kód postupně změnili a přidali anotaci typu osoba: řetězec v definici funkce, kompilace, testování kontroly typu kompilátorem, přidání rozhraní pro osoba zadejte a nakonec přidejte třídu pro Student. Konečný kód je:
třída Student { fullName: string;
konstruktor (public firstName: string, public middleInitial: string,
veřejné příjmení: řetězec) {
this.fullName = křestní jméno + "" + middleInitial + "" + příjmení;
}
}
Osoba rozhraní {
jméno: řetězec;
příjmení: řetězec;
}
funkce zdravější (osoba: osoba) {
návrat "Hello," + person.firstName + "" + person.lastName;
}
let user = new Student ("Jane", "M.", "User");
document.body.textContent = zdravější (uživatel);
Když to zkompilujete a podíváte se na emitovaný JavaScript, uvidíte, že třídy v TypeScript jsou jen zkratkou pro stejnou dědičnost založenou na prototypech, která se používá v prostém JavaScriptu ES3. Všimněte si, že vlastnosti person.firstName a person.lastName jsou automaticky generovány kompilátorem, když vidí jejich veřejnost atributy v Student konstruktor třídy a také přenesen do Osoba rozhraní. Jednou z nejhezčích výhod anotací typů v TypeScript je, že jsou rozpoznány nástroji, jako je Visual Studio Code:
Pokud jsou v kódu při úpravách ve VS Code chyby, zobrazí se chybové zprávy na kartě Problémy, například následující, pokud odstraníte konec řádku s instancí Student:
Výukový program Migrace z JavaScriptu jde do podrobností o tom, jak upgradovat existující projekt JavaScriptu. Přeskočením kroků nastavení je jádrem metody přejmenování souborů .js na .ts jeden po druhém. (Pokud váš soubor používá JSX, příponu používanou společností React, budete jej muset přejmenovat na .tsx, nikoli .ts.) Poté zpřísněte kontrolu chyb a chyby opravte.
Mimo jiné budete muset změnit na základě modulu vyžadovat() nebo definovat() příkazy k příkazům pro import TypeScript a přidejte soubory deklarace pro všechny moduly knihovny, které používáte. Exporty modulů byste také měli přepsat pomocí TypeScript vývozní prohlášení. TypeScript podporuje moduly CommonJS, jako to dělá Node.js.
Pokud se vám zobrazí chyby ohledně nesprávného počtu argumentů, můžete napsat podpisy přetížení funkce TypeScript. To je důležitá funkce, kterou JavaScript nemá. Nakonec byste měli přidat typy do svých vlastních funkcí a případně použít rozhraní nebo třídy.
Pro veřejné knihovny JavaScriptu obvykle nemusíte psát své vlastní soubory prohlášení. DefinitelyTyped je úložiště souborů deklarací, které jsou všechny přístupné pomocí npm. Deklarace najdete na stránce TypeSearch.
Jakmile převedete všechny své soubory JavaScriptu na TypeScript, posílíte typy a odstraníte chyby, budete mít mnohem robustnější kódovou základnu. Místo neustálého opravování běhových chyb hlášených testery nebo uživateli budete moci staticky detekovat nejčastější chyby.
Stojí za to sledovat, jak Anders Hejlsberg diskutuje o TypeScriptu. Jak od něj uslyšíte, TypeScript je JavaScript, který se rozšiřuje.
