Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

Lekce 1 - Úvod do TypeScriptu

JavaScript TypeScript Úvod do TypeScriptu

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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.

Instalace Node.js

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.

První webová aplikace v TypeScriptu
index.html

A to bude pro dnešek vše. V příští lekci, Funkce a třídy v TypeScriptu, se podíváme na složitější datové typy a naprogramujeme si něco užitečnějšího.


 

Stáhnout

Staženo 4x (705 B)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal Jiří Kvapil
Avatar
Jak se ti líbí článek?
3 hlasů
Autor se věnuje profesionálně front-endu a jezdí na všem co má kola.
Miniatura
Všechny články v sekci
TypeScript
Miniatura
Následující článek
Funkce a třídy v TypeScriptu
Aktivity (3)

 

 

Komentáře

Avatar
Michal Žůrek - misaz:28. června 22:52

Článek je fajn, ale mám k němu několik výhrad.

Jak jsem již zmínil, TypeScript přidává do JavaScriptu statické typování.

ne, typescript nic do JavaScriptu nepřidává, on pouze programátovi umožňuje (nutí ho) to tak psát. Ve skutečnosti i tento výrok je nesprávný, protože TypeScript do JS přeci jen něco přináší. Konkrétně helper funkce, které dává do výstupu jen jednou na začátek a řeší například dědičnost. Vypadá to třeba takhle.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

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.

TypeScript umožňuje využít v rozumné míře dynamičnosti JavaScriptu a umí s tím pracovat. Příkladem je podpora pro union typy. Nicméně chápu že v článku pro začátečníky to není třeba zohledňovat.

var x: string|number;

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

k základním typům ještě patří minimálně Function, Object, Array. Nepamatuji si jestli i null i undefined, ale myslím, že jedno z toho taky. Možná nějaké na které jsem zapomněl.

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

any není datový typ. Datový typ je všechno s čím lze pracovat jako s datovým typem. Například porovnávat pomocí instanceof.

var v;

if (v instanceof Number) {} // number je datový typ, můžeme použít instanceof
if (v instanceof String) {} // String je datový typ, můžeme použít instanceof
if (v instanceof Window) {} // Window je datový typ, můžeme použít instanceof
if (v instanceof HTMLCanvasElement) {} // HTMLCanvasElement je datový typ, můžeme použít instanceof
if (v instanceof XMLHttpRequest) {} // XMLHttpRequest je datový typ, můžeme použít instanceof

if (v instanceof any) {} // nesmysl. any není datový typ. Nemůžeme použít instanceof, nepůjde to ani zkompilovat, protože taková blbost se do JS nijak zkompilovat nedá.

Za všimnutí stojí taky že všechny datové typy začínají velkým písmenem a IDE je nezvýrazňuje modře. Je rozdíl mezi Number a number. Number s velkým N je datový typ, který JS používá interně. number s malým N je klíčové slovo, které TypeScript používá k označení datového typu Number. Stejně tak String a Boolean. Array a Function se to netýká, protože ty proto mají svoji vlastní syntaxi. Důležité je to i v tom příkladě s instanceof.

var v;

if (v instanceof Number) { } // OK
if (v instanceof number) { } // ERR, toto nezkompiluješ

nebo třeba v případě rozšiřování objektů. První kód bude funkční, druhý ne.

interface String {
    nevim();
}
String.prototype.nevim = function () { }
interface string {
    nevim();
}
string.prototype.nevim = function () { }

Nicméně to je taky jen na okraj, začátečníky tím nezatěžuj.

Tento kód poběží ve všech prohlížečích, které podporují ES3.

Tímto si nejsem zcela jist. Možné to je, ale nedokáži otestovat, zdali shoda náhod zajistí, že to fakt fungovat bude. Vůbec bych se nedivil, kdyby ES3 neuměl třeba innerHTML. Ve výchozím stavu se transpiluje k ES5. ES3 je standard z roku 1999, tomu odpovídá i zastoupení v prohlížečích. Všechny prohlížeče z HTML5 éry (tzn. rok 2007 a novější) nějakým způsobem podporují ES5 i přestože byl dokončen až v roce 2009. Pro představu ES5 podporuje i IE8 (ne všechny API, ale principiálně podporuje). Nikdy jsem nenašel význam pro podporu ES3, protože v aplikacích běžně používám i CSS feature, které ty historické prohlížeče povětšinou staré obdobně jako jsem já neumí, takže nefunkčnost nějakého JS mě pak už fakt vůbec netrápí.

Odpovědět  +2 28. června 22:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:29. června 9:24

Dovolím si tvrdit, že žádný z nástrojů jako Google Drive, Facebook nebo Netflix by dnes bez JavaScriptu neexistoval.

Proč by ne? Dříve se dělaly i vložené Java věci či flash. Že to bylo na prd? Jo, to určitě. Ale možné to bylo. :D

Odpovědět  +2 29. června 9:24
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Vojta Lechovský:29. června 9:38

V poslední větě jsou dvě čárky navíc ;-)

 
Odpovědět 29. června 9:38
Avatar
Vladislav Ladicky:29. června 19:42

Dovolím si tvrdit, že žádný z nástrojů jako Google Drive, Facebook nebo Netflix by dnes bez JavaScriptu neexistoval.

To žartuješ :D JS apky nie je možné písať v čistom JS, jedine v inom, nejakom trápnom jazyku kompilovanom do JS? :D Tak to by mohla tvrdiť aj Scala, ELM a kopec ďalších :D Zbožňujem takéto veľkohubé prehlásenia :D

Editováno 29. června 19:45
 
Odpovědět  +1 29. června 19:42
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.