Diskusia – 1. diel - Úvod do TypeScriptu

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:28.6.2018 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í.

Odpovedať

28.6.2018 22:52

Honza Bittner

Tvůrce

Honza Bittner:29.6.2018 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.

Odpovedať

29.6.2018 9:24

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

nickname01

Člen

nickname01:29.6.2018 9:38

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

Odpovedať

29.6.2018 9:38

Člen

:29.6.2018 19:42

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

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

Editované 29.6.2018 19:45

Odpovedať

29.6.2018 19:42

Patrik Pastor

Člen

Patrik Pastor:25.4.2019 1:20

po vygenerovani js souboru mi hlasi v typescript souboru chybu: "Duplicate function implementation" - kdyz zmenim nazev funkce "pozdrav()", tak potom to jede normalne, nevite nekdo proc to ma s tim proble?, diky.

Odpovedať

25.4.2019 1:20

Martin Kejzlar

Člen

Martin Kejzlar:31.3.2021 16:47

V článku v kódu toho HMTL souboru odkatzujete na soubor pozdrav.js, místo pozdrav.ts

Odpovedať

31.3.2021 16:47

Martin Kejzlar

Člen

Martin Kejzlar:31.3.2021 17:22

Beru zpět. Už to chápu :-)

Odpovedať

31.3.2021 17:22

Marcel Lonsmín

Člen

Marcel Lonsmín:22.3.2022 14:14

Ahoj, kdyby někdo narazil na stejný problém ( "Duplicate function implementation" ) stačí v terminálu CTRL + SHIFT + ; spustit tento příkaz:

tsc --init

inicializuje souboru tsconfig.json ve složce a VS Code to už nebude považovat za chybu.

Editované 22.3.2022 14:16

Odpovedať

22.3.2022 14:14

Programuji na českém layoutu klávesnice a nestydím se za to! :D

Tomáš Daněk

Člen

Tomáš Daněk:4.10.2022 21:31

Neměl by být <script> uvnitř tagu <body>?

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

Odpovedať

4.10.2022 21:31

Michal Viliš

Člen

Michal Viliš:5.3.2023 11:49

v návaznosti na vzniklý soubor tsconfig.json, po ctrl + shift + b můžete vybrat tsc:watch - tsconfig.json a soubory .ts se budou automaticky synchronizovat se soubory .js

Odpovedať

5.3.2023 11:49

Never give up!

Naučíme ťa pracovať na home-office.

Zistiť viac...

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – 1. diel - Úvod do TypeScriptu