X

Vitajte!

Nepremeškajte nové videá a zaujimavé novinky zo sveta Angularu 2+...

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