Programovanie

TypeScript vs. JavaScript: Pochopte rozdiely

Celosvetový web v zásade funguje na jazykoch JavaScript, HTML a CSS. JavaScript bohužiaľ nemá niekoľko funkcií, ktoré by vývojárom pomohli používať ho pre rozsiahle aplikácie. Zadajte strojopis.

Čo je to JavaScript?

JavaScript začínal ako skriptovací jazyk pre webový prehliadač Netscape Navigator; Brendan Eich napísal prototyp po dobu 10 dní v roku 1995. Názov JavaScript je prikývnutím k jazyku Java spoločnosti Sun Microsystem, aj keď sú tieto dva jazyky celkom odlišné, a podobnosť názvov v priebehu rokov viedla k významnému zmätku. JavaScript, ktorý sa významne vyvinul, je teraz podporovaný vo všetkých moderných webových prehliadačoch.

Po zavedení JavaScriptu na strane klienta v aplikácii Netscape Navigator nasledovalo rýchle zavedenie JavaScriptu na strane servera vo webových serveroch Netscape Enterprise Server a Microsoft IIS. Asi o 13 rokov neskôr predstavil Ryan Dahl Node.js ako otvorené zdrojové, medziplatformové runtime prostredie JavaScript nezávislé od ľubovoľného prehľadávača alebo webového servera.

Jazyk JavaScript

JavaScript je jazyk viacerých paradigiem. Má syntax zložených zátvoriek a bodkočiarky, podobne ako rodina jazykov C. Má slabé, dynamické písanie a je buď interpretované, alebo (častejšie) zostavené včas. JavaScript je vo všeobecnosti jednovláknový, aj keď existuje rozhranie Web Workers API, ktoré vykonáva viacvláknové spracovanie, a existujú udalosti, asynchrónne volania funkcií a spätné volania.

JavaScript podporuje objektovo orientované programovanie pomocou prototypov namiesto dedičnosti triedy použitej v C ++, Java a C #, hoci trieda syntax bola pridaná k JavaScriptu ES6 v roku 2015. JavaScript tiež podporuje funkčné programovanie vrátane uzávierok, rekurzie a lambdas (anonymné funkcie).

Pred jazykom JavaScript ES6 nemal jazyk optimalizáciu koncových hovorov; teraz je, aj keď je potrebné zapnúť prísny režim („používať prísne“), aby ste to povolili, a implementácia sa v jednotlivých prehliadačoch líši. Prísny režim tiež mení sémantiku JavaScriptu a mení niektoré obvykle tiché chyby tak, aby chyby vyhodili.

Čo je s označením „ES6“? Názov štandardizovaného jazyka JavaScript je ECMAScript (ES), podľa orgánu pre medzinárodné normy ECMA; ES6 sa tiež nazýva ECMAScript 2015 (ES2015). ES2020 je v súčasnosti návrhom normy.

Ako jednoduchý príklad, ktorý vám poskytne príchuť jazyka JavaScript, uvádzam niekoľko kódov, pomocou ktorých sa môžete rozhodnúť, či je deň alebo večer, a dynamicky vložiť vhodný pozdrav do pomenovaného webového prvku, ktorý sa nachádza v objekte dokumentu prehliadača:

var hodina = nový dátum (). getHours ();

var pozdrav;

ak (hodina <18) {

pozdrav = "dobrý deň";

} else {

pozdrav = "Dobrý večer";

}

document.getElementById ("ukážka"). innerHTML = pozdrav;

Ekosystém JavaScript

Existuje množstvo rozhraní API JavaScriptu. Niektoré poskytuje prehliadač, napríklad dokument API v kóde zobrazenom vyššie a niektoré dodávajú tretie strany. Niektoré rozhrania API platia pre použitie na strane klienta, iné pre použitie na serveri, iné pre použitie na počítači a iné pre viac ako jedno prostredie.

Medzi rozhrania API prehliadača patria objektový model dokumentu (DOM) a objektový model prehľadávača (BOM), geolokácia, plátno (grafika), WebGL (grafika zrýchlená pomocou GPU), HTMLMediaElement (zvuk a video) a WebRTC (komunikácia v reálnom čase).

Rozhraní API tretích strán je veľa. Niektoré predstavujú rozhrania s úplnými aplikáciami, napríklad s Mapami Google. Iné sú pomocné programy, ktoré uľahčujú programovanie v jazyku JavaScript HTML5 a CSS, napríklad jQuery. Niektoré, napríklad Express, sú aplikačné rámce na konkrétne účely; pre Express je účelom vybudovať webový a mobilný aplikačný server na Node.js. Na vrchole Expressu bolo vybudovaných množstvo ďalších rámcov. V roku 2016 som prediskutoval 22 rámcov JavaScriptu v snahe porozumieť tomu, čo sa stalo niečím zoologickým; veľa z týchto rámcov stále existuje v tej či onej podobe, niektoré však išli bokom.

Existujú veľa viac modulov JavaScript, viac ako 300 000. Aby sme sa s tým vyrovnali, používame správcovia balíkov, napríklad npm, predvolený správca balíkov pre Node.js.

Jednou z alternatív k NPM je Yarn, ktorá pochádza z Facebooku a tvrdí výhodu deterministických inštalácií. Podobné nástroje zahŕňajú Bower (z Twitteru), ktorý spravuje skôr front-end komponenty ako Node moduly; Ender, ktorá si hovorí malá sestra npm; a jspm, ktoré používajú moduly ES (novší štandard ECMA pre moduly), a nie moduly CommonJS, starší de-facto štandard podporovaný npm.

Webpack zoskupuje moduly JavaScriptu do statických prvkov pre prehliadač. Browserify umožňuje vývojárom písať moduly v štýle Node.js, ktoré sa kompilujú na použitie v prehliadači. Grunt je súborovo orientovaný bežec úloh JavaScriptu a gulp je systém zostavovania streamov a bežec úloh JavaScript. Výber medzi gruntom a dúškom nie je rozhodujúci. Nainštaloval som aj používam ten, ktorý bol nastavený pre daný projekt.

Aby sme zaistili spoľahlivejší JavaScriptový kód bez kompilácie, používame linters. Termín pochádza z nástroja na odstraňovanie vlákien v jazyku C, čo bol štandardný nástroj Unix. Znaky kódu JavaScript zahŕňajú JSLint, JSHint a ESLint. Spustené linterery môžete automatizovať po zmenách kódu pomocou bežca úloh alebo vášho IDE. Opäť nie je jasný výber medzi lintermi a ja použijem ten, ktorý bol nastavený pre daný projekt.

Keď už hovoríme o editoroch a IDE, skontroloval som 6 IDE JavaScriptu a 10 editorov JavaScriptu, naposledy v roku 2019. Moje najlepšie možnosti boli Sublime Text (veľmi rýchly editor), Visual Studio Code (konfigurovateľný editor / IDE) a WebStorm (IDE).

Transplantéry vám umožňujú preložiť niektoré ďalšie jazyky, napríklad CoffeeScript alebo TypeScript, do jazyka JavaScript a preložiť moderný jazyk JavaScript (napríklad kód ES2015) do základného jazyka JavaScript, ktorý sa dá spustiť v (takmer) ľubovoľnom prehliadači. (Pre skoršie verzie prehliadača Internet Explorer sú všetky stávky vypnuté.) Najbežnejším prekladačom pre moderný JavaScript je Babel.

Čo je to TypeScript?

TypeScript je napísaná nadmnožina JavaScriptu, ktorá sa kompiluje s obyčajným JavaScriptom (ES3 alebo vyšším; je konfigurovateľný). Open source kompilátor príkazového riadku TypeScript je možné nainštalovať ako balík Node.js. Podpora strojopisu prichádza s Visual Studio 2017 a Visual Studio 2019, Visual Studio Code a WebStorm a možno ju pridať do Sublime Text, Atom, Eclipse, Emacs a Vim. Prekladač / prekladač strojopisu TSC je napísaný strojopisom.

TypeScript pridáva do JavaScriptu voliteľné typy, triedy a moduly a podporuje nástroje pre rozsiahle JavaScriptové aplikácie pre akýkoľvek prehliadač, pre ľubovoľného hostiteľa a pre akýkoľvek OS. Medzi mnohými ďalšími výhrami pre TypeScript bol v TypeScript prepracovaný populárny rámec Angular.

Typy umožňujú vývojárom JavaScriptu pri vývoji aplikácií JavaScriptu používať vysoko produktívne vývojové nástroje a postupy, ako je statická kontrola a refaktoring kódu.

Typy sú voliteľné a odvodenie typu umožňuje, aby niekoľko anotácií typov malo veľký vplyv na statické overenie vášho kódu. Typy vám umožňujú definovať rozhrania medzi softvérovými komponentmi a získať prehľad o správaní sa existujúcich knižníc JavaScriptu.

TypeScript ponúka podporu pre najnovšie a vyvíjajúce sa funkcie JavaScriptu, vrátane tých z ECMAScript 2015 a budúcich návrhov, ako sú asynchronné funkcie a dekorátory, ktoré pomáhajú vytvárať robustné komponenty.

Jazyk strojopisu

Jazyk TypeScript akceptuje JavaScript ako platný, ale ponúka ďalšie možnosti anotácií typov, kontroly typu v čase kompilácie, tried a modulov. Všetky tieto možnosti sú nesmierne užitočné, keď sa pokúšate vytvoriť robustný softvér. Obyčajný JavaScript generuje chyby iba za behu programu a iba vtedy, ak sa váš program náhodou dostane na cestu s chybami.

Výukový program pre TypeScript za 5 minút objasňuje výhody. Východiskovým bodom je čistý JavaScript s príponou .ts:

funkcia zdravšia (osoba) {

návrat „Dobrý deň,“ + osoba;

}

let user = "Jane User";

document.body.textContent = zdravší (užívateľ);

Ak to skompilujete s tsc, vytvorí sa identický súbor s príponou .js.

V tomto výučbe ste tento kód zmenili postupne a pridali ste anotáciu typu osoba: reťazec v definícii funkcie, kompilácia, testovanie kontroly typu kompilátorom, pridanie rozhrania pre a osoba typu a nakoniec pridanie triedy pre Študent. Konečný kód je:

trieda študent {

fullName: string;

konštruktor (verejné krstné meno: reťazec, verejné stredné počiatočné: reťazec,

verejné priezvisko: reťazec) {

this.fullName = meno + "" + middleInitial + "" + priezvisko;

    }

}

Osoba rozhrania {

meno: retazec;

priezvisko: string;

}

funkcia zdravšia (osoba: osoba) {

návrat "Dobrý deň," + osoba.prve meno + "" + osoba.posledne meno;

}

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

document.body.textContent = zdravší (užívateľ);

Keď to skompilujete a pozriete sa na emitovaný JavaScript, uvidíte, že triedy v TypeScript sú iba skratkou pre rovnakú dedičnosť založenú na prototypoch, ktorá sa používa v obyčajnom JavaScripte ES3. Všimnite si, že vlastnosti osoba.prve meno a person.lastName sú automaticky generované kompilátorom, keď vidí ich verejné atribúty v Študent triedy konštruktér a tiež prenesený do Osoba rozhranie. Jednou z najkrajších výhod anotácií typov v TypeScript je, že sú rozpoznané nástrojmi, ako je Visual Studio Code:

Ak sa pri úprave v kóde VS vyskytujú chyby v kóde, chybové správy sa zobrazia na karte Problémy, napríklad ak odstránite koniec riadku s inštanciou Študent:

V návode Migrácia z JavaScriptu sa dozviete podrobnejšie informácie o tom, ako inovovať existujúci projekt v jazyku JavaScript. Preskočením krokov nastavenia je podstatou metódy premenovanie súborov .js na .ts po jednom. (Ak váš súbor používa príponu JSX, ktorú používa React, budete ju musieť premenovať na .tsx a nie .ts.) Potom sprísnite kontrolu chýb a chyby opravte.

Okrem iného budete musieť zmeniť jednotlivé moduly vyžadovať () alebo definovať () príkazy do príkazov na import TypeScript a pridajte súbory deklarácií pre všetky moduly knižnice, ktoré používate. Exporty modulov by ste mali prepísať aj pomocou TypeScript export vyhlásenie. TypeScript podporuje moduly CommonJS, ako to robí Node.js.

Ak sa vyskytnú chyby týkajúce sa nesprávneho počtu argumentov, môžete napísať podpisy preťaženia funkcií TypeScript. Toto je dôležitá funkcia, ktorú JavaScript nemá. Nakoniec by ste mali pridať typy do svojich vlastných funkcií a podľa potreby použiť rozhrania alebo triedy.

Pre verejné knižnice JavaScriptu zvyčajne nemusíte písať svoje vlastné súbory vyhlásení. DefinitelyTyped je úložisko deklaračných súborov, ktoré sú všetky prístupné pomocou npm. Vyhlásenia nájdete na stránke TypeSearch.

Keď skonvertujete všetky svoje súbory JavaScript na TypeScript, posilníte typy a odstránite chyby, získate oveľa robustnejšiu základňu kódov. Namiesto neustáleho opravovania runtime chýb hlásených testermi alebo používateľmi budete môcť staticky zistiť najčastejšie chyby.

Stojí za to sledovať, ako Anders Hejlsberg diskutuje o stroji TypeScript. Ako budete počuť od neho, TypeScript je JavaScript, ktorý sa rozširuje.

$config[zx-auto] not found$config[zx-overlay] not found