| 00:12 - 00:13 | Vitajte |
| 00:13 - 00:16 | v tejto časti si povieme niečo o TypeScripte |
| 00:16 - 00:19 | Na čo slúži, aké problémy rieši |
| 00:20 - 00:22 | ukážeme si čo je type-checking |
| 00:22 - 00:24 | a rovno si ho odskúšame na príkladoch |
| 00:25 - 00:26 | Poďme na to! |
| 00:27 - 00:30 | TypeScript je superset Javascriptu |
| 00:30 - 00:33 | dopĺňa ho o nové funkcie ktoré zatiaľ nie sú dostupné |
| 00:33 - 00:36 | v samotnej verzii tradičného JavaScriptu |
| 00:36 - 00:39 | sú to napríklad moduly, classy |
| 00:39 - 00:41 | interface |
| 00:41 - 00:44 | modifiery ako public, private |
| 00:45 - 00:47 | type-checking a mnoho ďalších |
| 00:48 - 00:50 | v tomto videu sa budeme venovať type-checkingu |
| 00:50 - 00:53 | podľa ktorého sa nazýva aj samotný TypeScript |
| 00:53 - 00:57 | asi najfrustrujúcejšou vecou pri práci s JavasScriptom |
| 00:57 - 01:00 | je chýbajúci medzičlánok v podobe |
| 01:00 - 01:03 | ktorá by odhalila chybu v kóde už počas vývoja |
| 01:04 - 01:07 | Tým, že JavaScript je interpretovaný jazyk |
| 01:07 - 01:09 | tak Váš script sa musí najprv spustiť |
| 01:09 - 01:11 | aby ste zistili či je validný |
| 01:11 - 01:14 | a toto TypeScript rieši za nás |
| 01:14 - 01:17 | TypeScript sa kompiluje do tradičného JavaScriptu |
| 01:17 - 01:20 | takže akákoľvek chyba v kóde spôsobí |
| 01:20 - 01:24 | (môže to byť napríklad zabudnutá bodkočiarka či zlá úvodzovka) |
| 01:24 - 01:26 | že TypeScript kompilátor vyhodí chybu |
| 01:27 - 01:30 | vďaka tomuto vieme mininalizovať chybovosť |
| 01:30 - 01:31 | nášho kódu už počas vývoja |
| 01:32 - 01:34 | Poďme si to rovno vyskúšať! |
| 01:41 - 01:44 | Otvoríme si stránku http://typescriptlang.org |
| 01:50 - 01:52 | Klikneme na tlačítko "Playground" |
| 01:56 - 01:58 | Na tejto stránke sú dve textové polia |
| 01:59 - 02:02 | Vľavo píšeme TypeScript a vpravo vidíme |
| 02:02 - 02:03 | kompilovaný výstup |
| 02:05 - 02:08 | Ako sme si už povedali predtým, |
| 02:08 - 02:11 | každý validný JavaScript je zároveň aj validný TypeScript |
| 02:13 - 02:16 | Preto ak zadáme do TypeScriptu zápis ako napríklad premenná: |
| 02:16 - 02:19 | var myname = ''Peter Oravec" |
| 02:19 - 02:22 | s hodnotou napríklad Peter Oravec |
| 02:22 - 02:25 | skompilovaná verzia bude rovnaká |
| 02:32 - 02:35 | Prečo je ale TypeScript taký obľúbený? |
| 02:35 - 02:39 | Kvôli typovej kontrole podľa ktorej dostal aj meno |
| 02:39 - 02:42 | Skúste zmeniť obsah premennej myname |
| 02:42 - 02:43 | napríklad na číslo |
| 02:43 - 02:46 | Vidíte?! Nedá sa to a vráti to error |
| 02:47 - 02:48 | Toto je typová kontrola |
| 02:49 - 02:52 | Ak je premenná definovaná ako string |
| 02:52 - 02:55 | a vy jej nasilu skúsite zmeniť typ, dostanete error |
| 02:59 - 03:01 | Poďme si ukázať jednotlivé typy |
| 03:04 - 03:05 | Prvý je BOOLEAN |
| 03:06 - 03:09 | ktorý môže obsahovať len 2 hodnoty, |
| 03:09 - 03:11 | TRUE alebo FALSE |
| 03:12 - 03:14 | Zápis vyzerá takto |
| 03:14 - 03:17 | Pomocou slova LET definujeme scope premennú |
| 03:17 - 03:20 | Všimnite si, že kompilátor použil VAR |
| 03:30 - 03:32 | Nasleduje názov premennej |
| 03:33 - 03:36 | a slovo za názvom premennej je typ premennej |
| 03:37 - 03:39 | Našu premennú sme nastavili na TRUE |
| 03:46 - 03:49 | Teraz skúste zmeniť typ napríklad na FALSE |
| 03:50 - 03:52 | Všetko je v poriadku |
| 03:52 - 03:54 | lebo je to správna hodnota pre tento typ |
| 03:55 - 03:58 | Zmeňte premennú na číslo a dostanete error |
| 04:04 - 04:06 | Ďalší typ je číslo |
| 04:06 - 04:09 | Ako názov typu použiejeme slovo NUMBER |
| 04:11 - 04:14 | Typ NUMBER akceptuje celé číslo |
| 04:14 - 04:16 | tak ako aj desatiné číslo |
| 04:16 - 04:18 | Nasleduje typ STRING |
| 04:18 - 04:20 | čo je klasický reťazec znakov |
| 04:21 - 04:24 | Pre názov typu použijeme slovo STRING |
| 04:24 - 04:27 | ten bude akceptovať len stringy |
| 04:28 - 04:31 | či už v dvojitých alebo normálnych úvodzovkách |
| 04:32 - 04:34 | Type ARRAY funguje trochu inak |
| 04:42 - 04:44 | Ak to zadáme takto |
| 04:44 - 04:45 | dostaneme chybu |
| 04:46 - 04:48 | Pretože, je to síce ARRAY |
| 04:48 - 04:51 | ale musíme tiež zadať, aký ARRAY |
| 04:51 - 04:54 | aký typ dát bude obsahovať |
| 04:54 - 04:56 | Za slovom ARRAY |
| 04:57 - 04:58 | musíme zadať ešte typ |
| 04:59 - 05:01 | Zápis vyzerá takto |
| 05:14 - 05:17 | Ak potrebujem mixovať viac typov naraz |
| 05:17 - 05:20 | môžeme použiť PIPE znak ako oddelovač |
| 05:23 - 05:24 | V tomto prípade |
| 05:26 - 05:28 | pole bude akceptovať ak string aj číslo |
| 05:31 - 05:34 | Čo ale v prípade, že chceme kombinovať akékoľvek typy |
| 05:34 - 05:37 | vtedy existuje zázračný typ ANY |
| 05:38 - 05:40 | ktorý reprezentuje čokoľvek |
| 05:41 - 05:44 | Pokiaľ je to ale možné tento typ nepoužívajte |
| 05:44 - 05:46 | len v najnutnejších prípadoch |
| 05:51 - 05:53 | Ďalší typ je TUPLE |
| 05:53 - 05:56 | čo je vlastne pole s fixným počtom záznamov |
| 05:57 - 05:59 | s vopred určeným typom |
| 06:00 - 06:03 | Náš príklad popisuje pole s dvoma stringami |
| 06:03 - 06:06 | Ak by jeden záznam mal byť číslo |
| 06:07 - 06:09 | tak len prepíšeme typ druhej položky |
| 06:09 - 06:10 | na NUMBER |
| 06:13 - 06:14 | Nasleduje ENUM |
| 06:15 - 06:17 | je to typ vopred vymenovaných hodnôt |
| 06:18 - 06:20 | Napríklad tu definujeme farby |
| 06:20 - 06:22 | červená, zelená a modrá |
| 06:23 - 06:26 | Do premennej C vyberieme pomocou zápisu Color.Red |
| 06:27 - 06:28 | hodnotu červenej |
| 06:29 - 06:30 | Aká bude? |
| 06:30 - 06:32 | Pozrime si to v konzole |
| 06:38 - 06:39 | je to 0 |
| 06:40 - 06:41 | Prečo 0? |
| 06:42 - 06:44 | Lebo ENUM je zároveň pole |
| 06:45 - 06:48 | teda červená je prvá v poradí a teda jej |
| 06:48 - 06:49 | index je 0 |
| 06:52 - 06:55 | Vytvorme ešte jeden ENUM s názvom Color2 |
| 06:56 - 06:59 | Hodnotám v ENUM type vieme priradiť aj konkrétnu |
| 06:59 - 07:01 | napríklad číselnú hodnotu |
| 07:01 - 07:04 | Toto sa môže hodiť v rôznych situáciách |
| 07:04 - 07:07 | V tomto prípade hodnota Color.Green |
| 07:07 - 07:09 | bude rovná číslu 222 |
| 07:10 - 07:11 | Skontrolujem si to |
| 07:32 - 07:34 | Teraz si ukážeme čo je INTERFACE |
| 07:36 - 07:39 | Vytvorme si objekt s názvom |
| 07:39 - 07:42 | myPersonalData a zadajme do neho hodnoty |
| 07:43 - 07:47 | napríklad meno, webstránku, adresu portfólia |
| 07:48 - 07:49 | a rok narodenia |
| 08:07 - 08:10 | Teraz vytvoríme INTERFACE typu Person |
| 08:10 - 08:12 | teda vlastný typ |
| 08:13 - 08:15 | ktorý bude validovať naše dáta |
| 08:18 - 08:19 | Zápis vyzerá takto |
| 08:22 - 08:25 | Interface Person |
| 08:27 - 08:30 | a ďalej sú to položky našeho objektu |
| 08:32 - 08:34 | Každej položke zadáme zároveň typ |
| 08:34 - 08:36 | aký by mala mať |
| 08:51 - 08:54 | V prípade, že náš interface a jeho hodnoty sa nezhodujú |
| 08:55 - 08:57 | interface vyvolá error |
| 09:09 - 09:12 | Čo ale v prípade, že môj objekt obsahuje položku |
| 09:12 - 09:13 | ktorá je nepovinná |
| 09:14 - 09:17 | Takúto premennú označíme v interface |
| 09:17 - 09:18 | pomocou otáznika |
| 09:18 - 09:20 | To znamená, že je nepovinná |
| 10:01 - 10:03 | Type-checking platí aj vo funkciách |
| 10:03 - 10:05 | vytvorme si funkciu myFunction |
| 10:05 - 10:07 | s parametrom inputData |
| 10:08 - 10:10 | ktorá nič nerobí |
| 10:18 - 10:21 | v TypeScripte môžete parametrom zadávať tiež typ |
| 10:22 - 10:25 | a dokonca aj návratový typ ktorý funkcia vracia |
| 10:27 - 10:29 | V našom prípade funkcia nerobí nič |
| 10:29 - 10:31 | a preto návratový typ dáme VOID |
| 10:34 - 10:37 | V tomto nastavení naša funkcia s parametrom string |
| 10:38 - 10:39 | je validná |
| 10:40 - 10:43 | ak by naša funkcia začala vracať napríklad číslo môžeme |
| 10:43 - 10:44 | zmeniť typ VOID na NUMBER |
| 10:46 - 10:49 | Vďaka tomuto si viete typovo postrážiť vstupné |
| 10:49 - 10:51 | a výstupné hodnoty každej Vašej funkcie |
| 10:51 - 10:52 | Veľmi šikovné |
| 10:56 - 11:00 | Každá Angular appka obsahuje konfiguračný súbor pre TypeScript |
| 11:00 - 11:03 | volá sa tsconfig.json |
| 11:04 - 11:06 | A v ňom nastavujete správanie Vašeho TypeScriptu |
| 11:06 - 11:08 | a jeho kompilátora |
| 11:08 - 11:11 | Ak začínate nový projekt jedno z dobrých nastavení je |
| 11:11 - 11:15 | zapnutie noImplicitAny na TRUE |
| 11:15 - 11:17 | Čo toto nastavenie robí? |
| 11:17 - 11:21 | Jednoducho každá premenná ktorá nemá zadefinovaný typ |
| 11:21 - 11:24 | a teda TypeScript sa bude snažiť jej nanútiť |
| 11:24 - 11:26 | typ ANY vyvolá error |
| 11:31 - 11:33 | Ako vníma TypeScript hodnoty |
| 11:34 - 11:35 | NULL a UNDEFINED? |
| 11:36 - 11:40 | Sú pre neho validné čo môže byť zdrojom rôznych bugov vo Vašom kóde |
| 11:41 - 11:44 | Ďalší spôsob ako minimalizovať chybovosť Vašeho kódu |
| 11:44 - 11:46 | je zapnutie funkcie |
| 11:46 - 11:49 | strictNullChecks na TRUE |
| 11:50 - 11:52 | Vtedy priradenie |
| 11:52 - 11:55 | typu NULL alebo UNDEFINED spôsobí chybu |
| 11:58 - 12:00 | Ešte sme nespomenuli jeden typ |
| 12:01 - 12:02 | a tej je typ NEVER |
| 12:03 - 12:06 | Je to typ ktorý dostáva napríklad funkcia |
| 12:07 - 12:08 | ktorá skončí errorom |
| 12:09 - 12:11 | alebo funkcia ktorá sa nikdy neukončí |
| 12:12 - 12:16 | V tejto časti sme si ukázali základy TypeScriptu |
| 12:16 - 12:19 | Naučili sa ako funguje type-checking |
| 12:19 - 12:22 | a vytvorili aj prvý interface |
| 12:22 - 12:25 | Dúfam, že sa Vám TypeScript zapáčil |
| 12:27 - 12:30 | Ďakujem za pozornosť a vidíme sa v ďalšom videu |
Základy TypescriptuType-checking
V tejto časti si povieme niečo o TypeScripte. "Čo je Typescript", "Aké problémy rieši" a rozoberieme type-checking na príkladoch a vytvoríme aj prvý interface v TypeScripte
Čo je TypeScript?
Angular 2+ sa píše v TypeScripte od Microsoftu. Je to superset (nadstavba) JavaScriptu ktorá ho dopĺňa o ďalšie funkcie ktoré zatiaľ nie sú dostupné v aktuálnej verzii JavaScriptu. Sú to napríklad:
- classy
- interface
- modifiery (public, private)
- type-checking
- intellisense
- a veľa ďalších...
Každý validný JavaScript je zároveň aj validný Typescript takže naučiť sa ho nevyžaduje učiť sa niečo nové úplne od základov ale len rozšíriť svoje existujúce znalosti JavaScriptu o nové funkcie.
Tipy pre nové Angular aplikácie
Používaním TypeScriptu Váš kód dostane typovú kontrolu ktorá pomáha písať menej chybový kód. Existujú však aj 2 nastavenia Typescript kompilátora ktoré Vám v tomto pomôžu, sú to:
noImplicitAny
Odporúčam nastaviť hodnotu tejto vlastnosti na true. Vtedy TypeScript kompilátor vyhodí chybu ak premenná (alebo premenná ktorú vracia funkcia) nemá definovaný typ. TypeScript štandardne premenným ktoré nemajú zadefinovaný typ nastavuje ANY čo je priestor na chyby.
strictNullChecks
Zapnutím tejto funkcie TypeScript kompilátor hodí chybu ak sa budete premenným snažiť nastaviť hodnotu null alebo undefined. Toto môže byť zdrojom rôznych chýb.
Diskusia
