Diskuze – Lekce 1 - Úvod do TypeScriptu

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

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í.

Odpovědět

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.

Odpovědět

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 ;-)

Odpovědět

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

Editováno 29.6.2018 19:45

Odpovědět

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.

Odpovědět

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

Odpovědět

31.3.2021 16:47

Martin Kejzlar

Člen

Martin Kejzlar:31.3.2021 17:22

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

Odpovědět

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.

Editováno 22.3.2022 14:16

Odpovědět

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>

Odpovědět

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

Odpovědět

5.3.2023 11:49

Never give up!

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 10 zpráv z 11.

Nejčastěji vyhledáváné

Diskuze – Lekce 1 - Úvod do TypeScriptu