CategoryTypeScript

TypeScript: async funkce s interface

A takhle by mohla vypadat vaše async funkce pracující se složitějšími datovými strukturami realizovanými pomocí interfaces:

Async/await nebo callback? Oboje!

Pokud chcete nabídnout svoji funkcionalitu skutečně širokému obecenstvu, pak byste je asi neměli nutit do vámi vybraného modele použití formou callbacku, nebo promises, ale nabídněte hned obě.

Nic složitého. Stačí nabídnout interface funkce, kde budete detekovat její parametry a podle nich, respektive volání s nimi, zjistíte jak daný konzument vaší funkcionality hodlá použít a podle toho vyberete implementaci samotné funkce:

Samozřejmě lze napsat i kompaktněji:

TypeScript: Jest a testování asynchronních funkcí

V tomto případě asynchronních funkcí implmementujících svůj návrat skrze callback funkci.

Tohle by mohla být nějaká asynchronní funkce pro výpočet součtu:

V kódu nic nehledejte. Je to opravdu jen princip: funkce s několika parametry, kde posledním je callback funkce, která se provede po získání výsledku. V mém případě ihned, nicméně princip je jasný…

Jest test

A tohle je na Jestu pěkné. Chová se přesně tak, jak byste čekali. Prostě zavoláte svou asynchronní funkci a v jejím callbacku provedete patřičný test. Hotovo.

Připojím snad jen kompaktnější zápis testovací funkce využívající arrow function.

TypeScript: dynamická modifikace objektu

Pokud přicházíte z JavaScriptu, určitě budete znát tento způsob práce s typem Object:

Kód je jednoduchý a zcela jasný:
– deklarujete a zároveň definujete proměnnou osoba jako objekt s jediným klíčem jmeno.
– potom k vytvořenému objektu přidáváte další klíč povolani
– a nakonec celý objket vytisknete na standartní výstup, do konzole.

V JavaScriptu OK.

Tohle vám ale v TypeScriptu neprojde


Důvod je jasný: TypeScript je nadmnožina JavaScriptu, která do něj zavádí statické typování. Z příkladu vyplývá, že objekt jste deklarovali joko objekt s jediným klíčem, a proto jej dál úž nikde nemůžete modifikovat, co se klíčů týče. Nově vzniklý objekt už je typově jiný.

Ale i s tímto si TypeScript docela elegantně vypořádá. V deklaraci proměnné stačí místo konkrétního jednoho klíče deklarovat obecné pole s typem string, který může nabývat jakékoliv hodnoty a máte po problému:

V TypeScriptu OK 🙂

Celý fígl je v jediném řádku

Kterým říkáte: hele Object nebude obsahovat jeden, přesně pojmenovaný klíč, ale bude obsahovat celé pole hodnot klíčů stringů, které budou odkazy na proměnné, samotné klíče, jakéhokoliv typu (any)

Praktické využití?

To se samo nabízí: pokud se snažíte složitější datové struktůry udržet na uzdě pomocí interface, pak statický typovost vám nedovolí uhnout. Někdy dobré, ale někdy ne. Může se hodit mít definovaný intarface jako nějaké datové minimum, který konkrétní objekt má splňovat, ale krom povinných klíčů byste chtěli čas od času někde něco k něčemu přidat. Pak se vám tento fígl bude hodit.

Je jasné, že

můžete pouřít přímo v deklaraci samotného interface.

JavaScript: promises a async/await

Jsem si vědom toho, že o promises toho bylo napsáno dost. Určitě už ale o něco méně o async/await. Nicméně z diskuzí s javascriptovými vývojáři, kterých se v poslední době účastním, mám pocit, že většina z nich vidí async a promise jako zcela odlišné techniky, které krom toho, že řeší stejný problém, chápou jako zcela odlišné věci.

Promises


Určitě ne ideální, ale plně funkčnní javascriptový kód, který pomocí promises řeší asynchronní operace, byť se v příkladu jedná o obyčejné matemtické operace. Důkaz že asynchronně se dá psát i non-blocked kód 🙂

Async/Await


Přepsal jsem výše uvedený kód z promises do async/await.

Vlastně nepřepsal 🙂 Použil jsem všechny jednotlivé funkcionality tak jak jsou s primises a jen jsem nahradil chain volání v promisách implementovaný skrze then do jedné jediné funkce, uvozené klíčovým slovem async. Samotné volání může vypadat složitě, ale to jen kvůli IIEF, které jsem v příkladu použil.

Suma sumárum

Async/await přímo staví na promises. Je vnitřně naiplementovaný skrze promises. Jen zavádí novou konstrukci zápisu, která může být programátorům přicházejících ze světa blokujících operací na první pohled bližší, než více méně funkcionální zápis v zřetězeném chainu pomocí holých promisí.

Osobně se dál držím callbacků, ale pokud bych musel šáhnout po něčem z výše popsaném, vyberu si async/await konstrukci.


PS: calback hell není vlastnost jazyka, je to jen špatně navržená kompozice jednotlivých funkcionalit 🙂

For loop v TS, JS (performance)

V ES6 je nově for of loop, který iteruje nad čímkoliv, co umí iterovat, jako je např. pole a objekt.
A to mě vedlo ke krátkému a opravdu jednoduchému testu, ve kterém jsem si ověřil výkonost jedotlivých for loop konstrukcí.

Výsledky

Env NodeJS Safari Chrome Firefox
Create time 497 209 507 2793
For in 1421 7606 1534 6575
For of 11 36 31 10643
For 11 46 34 8724

Všechny časy jsou v ms.

Několik rychlých závěrů

  • Firefox už dlouho nepoužívám a do testu jsem jej vložil jen pro úplnost. Pozitivní zjištění: o nic jsem nepřišel…
  • Je super, jak je NodeJS opravdu dobře zoptimalizovaný a na prováděný kód téměř nemá žádný vliv prostředí.
  • Chrome: V8 společná s NodeJS je znát. Výkonový rozdíl vyplývá z prostředí ve kterém kód běží a dá se pochopit.
  • Safari má vlastní JS engine SquirrelFish, který je opravdu dobrý…

Poznámka na závěr

Ze zvědavosti jsem chtěl takto otestovat i PHP.

Při pokusu vytvořit pole s 10.000.000 čísly (tak jak jsem to dělal v JS) jsem se dočkal chybové hlášky Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 134217736 bytes) in /Users/pepa/test/looptest/test.php on line 7 a tím jsem testování v PHP odpískal.

Pravdou je, že jsem ještě zkusil zmenšít velikost vytvářeného pole na 10.000, tedy tisíckrát meněí. Jo! Pole se vytvořit podařilo. Pak jsem se zarazil. Tohle chceš vážně testovat?

ts-check: na cestě od JavaScriptu k TypeScriptu

Pokud svůj javascriptový kód obohatíte o JSDoc minimálně na úrovni dokumnetace funkcí, pak pomocí direktivy // @ts-check získáte typovou kontrolu, kterou nabízí například TypeScript. Jasně, že na tak kompletní, ale jakýsi posun k typovosti tu je.

Pokud pak jeětě použijete /** @type {number} */ nad řádkem s deklarací proměnné, získáte i statické typování na úrovni jendotlivých proměnných.

Nutno dodat, že tohle funguje jen v MS Visual Code editoru… Ale kdo dnes pro kódování v JS, nebo TS používá něco jiného 🙂
Direktiva ts-check musí být na začátku JS souboru.

Při volání funkce pak editor korektně podtrhne nevalidní parametr, který je jiného typu, než bylo specifikováno v JSDoc komentáři.

Editor pak i proměnou okomentovanou specifikací typu pak korektně označí chybou v místech, kde se snažíte přiřadit nekorektní hodnotu.

TypeScript: začínáme

OK, pokud už nějakou dobu píšete v JavaScriptu a vašim hřištěm je backend webových aplikací, nebo desktopové aplikace, velice rychle se vám může stát, že vám vaše aplikace jednou začnou přerůstat přes hlavu. K tomu může dojít z různých důvodů, tím nejobvyklejším může být práce nad kódem v týmu, jeho sdílení a snaha o zachování nějaké rozumné kvality kódu napříč týmem a časem, třeba pro je refaktoring a podobné hrátky… Nicméně těch důvodů je víc…
Tak minimálně proto TypeScript…

typescript language

Instalujeme TypeScript

Aboslutnní minimum: předpokládám, že každý má NodeJS a NPM a proto může někde v konzoli spustit následující příkaz

Globbálně nainstalovaný balíček TypeScript vám pak umožní kompilovat vaše zdrojáky, projekty z TypeScriptu do klasickéhe JavaScriptu, abyste je pak mohli nějak deplojovat do produkčního prostředí, nebo kamkoliv jinam, kde je nějaky JavaScriptový runtime.

Nejjednodušší TypeScritová aplikace, znáte to, Hello, World

No a pak stačí pomocí výše popsaného kompilátoru přeložit do JavaScriptu:

Výsledkem je pak čistý JavaScriptový kód v souboru hello-world.js (výstup kompilátoru).

Výsledek kompilace pak spustíte klasicky pod NodeJS

Velkou výhodou kompilátoru je, že můžete specifikovat výslednou verzi generovaného JavaScriptu, ale i také specifikovat, jak bude zacházeno s moduly:

Tohle by mohlo připomínat BabelJS… 🙂

Aby to pěkně odsýpalo od ruky…

Aby práce s TypeScriptem byla co nejpohodlnější, je dobré si doinstalovat NPM balíček ts-node, který vám pak umožní spouštět vaše skripty přímo z vašeho MS Visual Code editoru.

Editovaný zdroják pak půjde spouštět přímo v editoru bez nutnosti jeho kompilace, pokud tedy máte doinstalovaný nějaký runner, jako je například Code Runner

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑