1. diel - Úvod do TypeScriptu

Zdravím všetky u prvej lekcie kurzu, ktorý ako dúfam, kompletne zmení váš názor na často zatracovaný jazyk JavaScript. Je veľa dobrých dôvodov, prečo zatracovaný je. Niektoré vychádza z nepochopenia, iné sú bohužiaľ pravdivé. Našťastie prišiel Microsoft so svojím TypeScript a snažia sa nám život uľahčiť. (Viem, že je to veta, ktorú o Microsoftu často nepočujete, ale je to tak.) TypeScript dáva JavaScriptu to najlepšie zo sveta objektovo orientovaného programovania a vnáša do neho toľko potrebný poriadok a prehľadnosť, najmä vďaka zavedeniu kontroly dátových typov, z čoho je odvodený aj jeho názov. Ak to myslíte s programovaním webových aplikácií vážne, bez poriadku sa nezaobídete a prehľadnosť uvítate.

Ak neviete, čo JavaScript je, alebo si nie ste istí, ako veľmi dobre ho ovládate, odporučil by som skvelý miestnej kurz Základná konštrukcia jazyka JavaScript a nadväzujúce kurz Základy objektovo orientovaného programovania v JavaScripte. Budeme sa totiž zaoberať hlavne TypeScriptem a vysvetľovať znova pojmy funkcie alebo inštancie by tu bolo zbytočné.

Nevýhody JavaScriptu

JavaScript je veľmi užitočný jazyk, ktorý umožnil zo statického webu vytvoriť úžasné webové aplikácie, ktoré používame dnes. Dovolím si tvrdiť, že žiadny z nástrojov ako Google Drive, Facebook alebo Netflix by dnes bez JavaScriptu neexistoval. Bohužiaľ písať čisto v JavaScriptu bolo a je pomerne náročné a ak chcete vytvoriť väčší projekt, tak skoro až nemožné. Každý prehliadač totiž používa iný javascriptový engine: Chrome má V8, IE využíva Chakra a Firefox SpiderMonkey. Každý tento engine používa inú implementáciu ES2015 a rýchlosť pridávanie nových funkcií sa tiež líšia. Iste, váš kód pravdepodobne pobeží na najnovších prehliadačoch, ale na starších verziách už skôr nie. Nové funkcie ES2015 vám tak boli z týchto dôvodov často vstup zakázaný. JavaScript navyše vôbec neumožňuje uvádzať dátové typy, čo veľmi sťažuje napovedanie v kóde a tiež jeho automatickú kontrolu.

Čo je TypeScript a prečo by som ho mal používať?

TypeScript bol vytvorený firmou Microsoft už v roku 2012 a je vydávaný ako open source. Jedná sa o Superset (nadstavbu) jazyka JavaScript, ktorý ho rozširuje o statické typovanie, triedy, rozhrania a ďalšie veci známe z OOP. Je to tak užitočný nástroj, že si ho všimli aj v Googlu a integrovali ho do svojho javascriptového frameworku Angular, ale o tom neskôr. Pretože ponúka všetky tieto funkcie navyše, nezaobíde sa TypeScript bez takzvaného transpileru.

Transpiler

Transpiler je druh kompilátora, ktorý číta kód napísaný v jednom jazyku a produkuje rovnako fungujúce kód v jazyku inom. Vďaka tomu môžete príjemne produkovať aj kód v jazyku, ktorý nie je úplne príjemný na písanie. V tomto prípade v JavaScripte. Napíšete si kód plný krásnych nových funkcií, ktoré ponúka TypeScript, transpiler potom kód prevedie do klasickej ES5 alebo dokonca staručkej ES3 a viete, že vám kód bude fungovať.

Premenné a typový systém

Určite viete, že premenné v programovaní majú svoje dátové typy. Ako som už spomenul, TypeScript pridáva do JavaScriptu statické typovanie. Existujú dva základné typové systémy a to statický a dynamický. Krátko si ich popíšeme.

• Dynamický typový systém nás plne odtieňuje od toho, že premenná má vôbec nejaký dátový typ. Ona ho samozrejme vnútorne má, ale jazyk to nedáva najavo. Dynamické typovanie ide mnohokrát tak ďaleko, že premenné nemusíme ani deklarovať, akonáhle do nejakej premennej niečo uložíme a jazyk zistí, že nebola nikdy deklarovaná, sám ju založí. Do tej istej premennej môžeme ukladať text, potom objekt používateľa a potom desatinné číslo. Jazyky, ktoré využívajú dynamický typový systém, sa s tým samy pobijú a vnútorne automaticky mení dátový typ. V týchto jazykoch ide vývoj rýchlejšie vďaka menšiemu množstvo kódu, zástupcovia sú napr. PHP alebo práve JavaScript.
• Statický typový systém naopak striktne vyžaduje definovať typ premennej a tento typ je ďalej nemenný. Akonáhle premennú raz deklarujeme, nie je možné jej dátový typ zmeniť. Ak sa do textového reťazca pokúsime uložiť objekt užívateľ, dostaneme vynadané.

TypeScript je typizovanom jazyk, všetky premenné musíme teda najprv deklarovať s ich dátovým typom. Nevýhodou je, že vďaka deklaráciám je zdrojový kód trochu objemnejší a vývoj pomalší. Naopak obrovskou výhodou potom je, že nám transpiler pred spustením skontroluje, či všetky dátové typy sedia. Dynamické typovanie síce vyzerá ako výhodné a Záznam vám stále umožňuje ho využívať, ale zdrojový kód nie je možné automaticky kontrolovať. Keď niekde očakávame objekt používateľ a príde nám tam namiesto toho textový reťazec, odhalí sa chyba až za behu aplikácie a len pokiaľ práve túto časť vyskúšame. Naopak TypeScript nám nedovolí program ani skompilovať a na chybu nás upozorní (to je ďalšia výhoda kompilácia).

Základné dátové typy

Teraz si predstavíme základné dátové typy TypeScriptu:

• Pravda / nepravda: boolean
• Číslo: number
• Textový reťazec: string
• Dynamický typ: any

Pre začiatok bolo teórie viac než dosť. Poďme si TypeScript nainštalovať a niečo si naprogramujeme.

Inštalácia

Predtým než začneme TypeScript používať, budeme potrebovať jednu vec, a tou je Node.js. V prípade, že Node.js nepoznáte, môžete si prečítať Úvodná článok do technológie Node.js. Pre nás je teraz dôležité len to, že vďaka Node.js budeme môcť využívať balíčkový systém NPM, cez ktorý sa inštalujú snáď všetky javascriptové knižnice a nástroje, vrátane TypeScriptu. Na stránkach https://nodejs.org/en/download si stiahnite verziu, ktorá je vhodná pre váš systém. Inštaláciu iste zvládnete, nie je v nej potrebné nič nastavovať.

Teraz si do systému nainštalujeme TypeScript. Otvoríme si príkazový riadok (Stlačíme tlačidlo Win a napíšeme "cmd") a zadajte:

npm install -g typescript

Akonáhle vám NPM oznámi, že je hotovo, overíme si pre istotu, že TypeScript funguje. Zadáme teda:

tsc  -v

Konzola by vám mala vypísať niečo ako:

Version  2.9.2

Blahoželám, môžete teraz využívať TypeScript vo vašich projektoch.

Ahoj svete TypeScriptově aneb prvý program

Aby sme mohli písať TypeScript pohodlne, odporúčam stiahnuť zadarmo Visual Studio Code.

Html stránka

Po inštalácii si cez menu "File" vytvorte nový súbor, ktorý uložte ako index.html. Stránka sa bude odkazovať na súbor pozdrav.js. To bude skompilovaný TypeScript súbor, ktorý si vytvoríme hneď ako druhý. Obsah súboru bude nasledujúci:

<!DOCTYPE html>

<html lang="cs-cz">

<head>
    <meta charset="utf-8" />
    <title>První webová aplikace v TypeScriptu</title>
</head>

<body>

</body>

<script src="pozdrav.js"></script>

</html>

TypeScript súbor

Teraz to hlavné. V priečinku, kde máme náš index.html, si vytvoríme súbor pozdrav.ts. Ako vidíme, TypeScript využíva pre svoje súbory príponu .ts namiesto javascriptího .js. Súbor bude vyzerať nasledovne:

function pozdrav(jmeno: string) {
    return "Ahoj " + jmeno;
}

let promenna = "světe";

document.body.innerHTML = pozdrav(promenna);

Kód sa až na jednu drobnosť od JavaScriptu príliš nelíši. V mieste, kde je argument funkcie pozdrav(), je definovaný typ premennej, ktorý má funkcie prijať. V našom prípade string. Ak by sme sa pokúsili poslať do tejto funkcie číslo, kompilátor vypíše chybu. Ako ste si tiež mohli všimnúť, v mieste, kde deklarujeme premennú, typ nie je. Je to tým, že TypeScript sám spozná, že priraďujeme string a tým nám šetrí čas a množstvo kódu.

Teraz si otvorte priečinok s našou stránkou v prieskumníkovi Windows, stlačte kláves Shift a kliknite niekam do zložky pravým tlačidlom myši. V kontextovom menu vám pribudne možnosť "Otvoriť tu okno príkazového riadku" (prípadne okno PowerShell). Po výbere tejto možnosti sa vám otvorí nové okno príkazového riadka s cestou nastavenou na danú zložku. Alternatívne sa môžete v štandardnom príkazovom riadku do priečinka presunúť zadaním príkazu cd C:\Users\David\Desktop\HelloTS, kde si cestu upravte podľa svojho. V príkazovom riadku spustite nasledujúci príkaz:

tsc pozdrav.ts

V priečinku sa nám objaví súbor pozdrav.js, skompilovaný kód z pozdrav.ts do klasického JavaScriptu. Vyzerá nasledovne:

function pozdrav(jmeno) {
    return "Ahoj " + jmeno;
}
var promenna = "světe";
document.body.innerHTML = pozdrav(promenna);

Tento kód pobeží vo všetkých prehliadačoch, ktoré podporujú ES3. Ak spustíte index.html, uvidíte výsledok.

A to bude pre dnešok všetko. V budúcej lekcii, Funkcie a triedy v TypeScriptu , sa pozrieme na zložitejšie dátové typy a naprogramujeme si niečo užitočnejšie.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.