Lekce 1 - Úvod do TypeScriptu

Zdravím všechny u první lekce kurzu, který jak doufám, kompletně změní váš názor na často zatracovaný jazyk JavaScript. Je spousta dobrých důvodů, proč zatracovaný je. Některé vychází z nepochopení, jiné jsou bohužel pravdivé. Naštěstí přišel Microsoft se svým TypeScript a snaží se nám život ulehčit. (Vím, že je to věta, kterou o Microsoftu často neuslyšíte, ale je to tak.) TypeScript dává JavaScriptu to nejlepší ze světa objektově orientovaného programování a vnáší do něj tolik potřebný řád a přehlednost, zejména díky zavedení kontroly datových typů, z čeho je odvozený i jeho název. Myslíte-li to s programováním webových aplikací vážně, bez řádu se neobejdete a přehlednost uvítáte.

Pokud nevíte, co JavaScript je, anebo si nejste jistí, jak moc dobře ho ovládáte, doporučil bych skvělý místní kurz Základní konstrukce jazyka JavaScript a navazující kurz Základy objektově orientovaného programování v JavaScriptu. Budeme se totiž zabývat hlavně TypeScriptem a vysvětlovat znovu pojmy funkce nebo instance by zde bylo zbytečné.

Nevýhody JavaScriptu

JavaScript je velice užitečný jazyk, který umožnil ze statického webu vytvořit úžasné webové aplikace, které používáme dnes. Dovolím si tvrdit, že žádný z nástrojů jako Google Drive, Facebook nebo Netflix by dnes bez JavaScriptu neexistoval. Bohužel psát čistě v JavaScriptu bylo a je poměrně náročné a pokud chcete vytvořit větší projekt, tak skoro až nemožné. Každý prohlížeč totiž používá jiný javascriptový engine: Chrome má V8, IE využívá Chakra a Firefox SpiderMonkey. Každý tento engine používá jinou implementaci ES2015 a rychlost přidávání nových funkcí se také liší. Jistě, váš kód pravděpodobně poběží na nejnovějších prohlížečích, ale na starších verzích už spíše ne. Nové funkce ES2015 vám tak byly z těchto důvodů často zapovězeny. JavaScript navíc vůbec neumožňuje uvádět datové typy, což velmi znesnadňuje napovídání v kódu a také jeho automatickou kontrolu.

Co je TypeScript a proč bych ho měl používat?

TypeScript byl vytvořen firmou Microsoft již v roce 2012 a je vydáván jako open source. Jedná se o superset (nadstavbu) jazyka JavaScript, který ho rozšiřuje o statické typování, třídy, rozhraní a další věci známé z OOP. Je to tak užitečný nástroj, že si ho všimli i v Googlu a integrovali ho do svého javascriptového frameworku Angular, ale o tom později. Protože nabízí všechny tyto funkce navíc, neobejde se TypeScript bez takzvaného transpileru.

Transpiler

Transpiler je druh kompilátoru, který čte kód napsaný v jednom jazyce a produkuje stejně fungující kód v jazyce jiném. Díky tomu můžete příjemně produkovat i kód v jazyce, který není úplně příjemný na psaní. V tomto případě v JavaScriptu. Napíšete si kód plný krásných nových funkcí, které nabízí TypeScript, transpiler pak kód převede do klasické ES5 nebo dokonce stařičké ES3 a víte, že vám kód bude fungovat.

Proměnné a typový systém

Určitě víte, že proměnné v programování mají své datové typy. Jak jsem již zmínil, TypeScript přidává do JavaScriptu statické typování. Existují dva základní typové systémy a to statický a dynamický. Krátce si je popíšeme.

• Dynamický typový systém nás plně odstiňuje od toho, že proměnná má vůbec nějaký datový typ. Ona ho samozřejmě vnitřně má, ale jazyk to nedává najevo. Dynamické typování jde mnohdy tak daleko, že proměnné nemusíme ani deklarovat, jakmile do nějaké proměnné něco uložíme a jazyk zjistí, že nebyla nikdy deklarována, sám ji založí. Do té samé proměnné můžeme ukládat text, potom objekt uživatele a potom desetinné číslo. Jazyky, které využívají dynamický typový systém, se s tím samy poperou a vnitřně automaticky mění datový typ. V těchto jazycích jde vývoj rychleji díky menšímu množství kódu, zástupci jsou např. PHP nebo právě JavaScript.
• Statický typový systém naopak striktně vyžaduje definovat typ proměnné a tento typ je dále neměnný. Jakmile proměnnou jednou deklarujeme, není možné její datový typ změnit. Pokud se do textového řetězce pokusíme uložit objekt uživatel, dostaneme vynadáno.

TypeScript je typovaný jazyk, všechny proměnné musíme tedy nejprve deklarovat s jejich datovým typem. Nevýhodou je, že díky deklaracím je zdrojový kód poněkud objemnější a vývoj pomalejší. Naopak obrovskou výhodou pak je, že nám transpiler před spuštěním zkontroluje, zda všechny datové typy sedí. Dynamické typování sice vypadá jako výhodné a TypeScript vám stále umožňuje ho využívat, ale zdrojový kód není možné automaticky kontrolovat. Když někde očekáváme objekt uživatel a přijde nám tam místo toho textový řetězec, odhalí se chyba až za běhu aplikace a jen pokud zrovna tuto část vyzkoušíme. Naopak TypeScript nám nedovolí program ani zkompilovat a na chybu nás upozorní (to je další výhoda kompilace).

Základní datové typy

Nyní si představíme základní datové typy TypeScriptu:

• Pravda/nepravda: boolean
• Číslo: number
• Textový řetězec: string
• Dynamický typ: any

Pro začátek bylo teorie více než dost. Pojďme si TypeScript nainstalovat a něco si naprogramujeme.

Instalace

Předtím než začneme TypeScript používat, budeme potřebovat jednu věc, a tou je Node.js. V případě, že Node.js neznáte, můžete si přečíst Úvodní článek do technologie Node.js. Pro nás je teď důležité jen to, že díky Node.js budeme moci využívat balíčkový systém npm, přes který se instalují snad všechny javascriptové knihovny a nástroje, včetně TypeScriptu. Na stránkách https://nodejs.org/en/download si stáhněte verzi, která je vhodná pro váš systém. Instalaci jistě zvládnete, není v ní třeba nic nastavovat.

Nyní si do systému nainstalujeme TypeScript. Otevřeme si příkazovou řádku (Stiskneme tlačítko Win a napíšeme "cmd") a zadejme:

npm install -g typescript

Jakmile vám npm oznámí, že je hotovo, ověříme si pro jistotu, že TypeScript funguje. Zadáme tedy:

tsc  -v

Konzole by vám měla vypsat něco jako:

Version  2.9.2

Blahopřeji, můžete nyní využívat TypeScript ve vašich projektech.

Ahoj světe TypeScriptově aneb první program

Abychom mohli psát TypeScript pohodlně, doporučuji stáhnout zdarma Visual Studio Code.

HTML stránka

Po instalaci si přes menu "File" vytvořte nový soubor, který uložte jako index.html. Stránka se bude odkazovat na soubor pozdrav.js. To bude zkompilovaný TypeScript soubor, který si vytvoříme hned jako druhý. Obsah souboru bude následující:

<!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 soubor

Teď to hlavní. Ve složce, kde máme náš index.html, si vytvoříme soubor pozdrav.ts. Jak vidíme, TypeScript využívá pro své soubory příponu .ts namísto javascriptího .js. Soubor bude vypadat následovně:

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

let promenna = "světe";

document.body.innerHTML = pozdrav(promenna);

Kód se až na jednu drobnost od JavaScriptu příliš neliší. V místě, kde je argument funkce pozdrav(), je definován typ proměnné, který má funkce přijmout. V našem případě string. Pokud bychom se pokusili poslat do této funkce číslo, kompilátor vypíše chybu. Jak jste si také mohli všimnout, v místě, kde deklarujeme proměnnou, typ není. Je to tím, že TypeScript sám pozná, že přiřazujeme string a tím nám šetří čas a množství kódu.

Nyní si otevřete složku s naší stránkou v průzkumníku Windows, stiskněte klávesu Shift a klikněte někam do složky pravým tlačítkem myši. V kontextovém menu vám přibude možnost "Otevřít zde okno příkazového řádku" (případně okno PowerShell). Po výběru této možnosti se vám otevře nové okno příkazového řádku s cestou nastavenou na danou složku. Alternativně se můžete ve standardním příkazovém řádku do složky přesunout zadáním příkazu cd C:\Users\David\Desktop\HelloTS, kde si cestu upravte dle svého. V příkazovém řádku spusťme následující příkaz:

tsc pozdrav.ts

Ve složce se nám objeví soubor pozdrav.js, zkompilovaný kód z pozdrav.ts do klasického JavaScriptu. Vypadá následovně:

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

Tento kód poběží ve všech prohlížečích, které podporují ES3. Pokud spustíte index.html, uvidíte výsledek:

A to bude pro dnešek vše.

V příští lekci, Funkce v TypeScriptu, se podíváme na vytváření funkcí a jejich vlastnosti.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.