Typescript vs Javascript – Pochopení rozdílu

autor:
Tweet
Share
Share
Pin

Často se mě ptáte, jaký je vlastně rozdíl mezi JavaScriptem a TypeScriptem.

Pojďme se na to podívat…

Od samého počátku vaší programátorské cesty byl JavaScript (JS) klíčovou součástí všech vašich projektů pro front-end. Pokud už máte s JS nějaké zkušenosti, představte si TypeScript jako JavaScript rozšířený o dodatečné funkce, které zlepší přehlednost a typovou bezpečnost vaší aplikace. TypeScript vznikl jako open-source projekt společnosti Microsoft s cílem zefektivnit vývoj v JS a umožnit včasné odhalování chyb při kompilaci.

V tomto článku se zaměříme na klíčové vlastnosti JavaScriptu a TypeScriptu a prozkoumáme rozdíly mezi těmito dvěma skriptovacími jazyky.

Co je to JavaScript?

JavaScript se používá pro skriptování na straně klienta. Můžete vytvářet skripty přímo v HTML stránkách nebo vytvářet samostatné soubory s příponou .js, které pak do HTML stránky importujete. Běžným příkladem použití JavaScriptu v reálném světě je validace přihlašovacího formuláře, kde se zobrazí chybové hlášení, pokud zadáte nesprávné uživatelské jméno nebo heslo.

Nyní si ukážeme jednoduchý JS kód, který spustíme v prohlížeči:

Vytvořte soubor s názvem example.html a vložte do něj následující kód:

<script>
feeling = 'happy';
feeling = 23;
</script>

Tento jednoduchý kód nejprve deklaruje proměnnou a přiřadí jí řetězcovou hodnotu „happy“. Následně téže proměnné přiřadíme číselnou hodnotu. JavaScript s tím nemá žádný problém a tento kód bez problémů spustíte v libovolném prohlížeči. Podívejme se nyní, jak můžeme získat hodnotu proměnné „feeling“ od uživatele:

Naše HTML bude vypadat následovně:

<input type="textbox" id="howyoufeel">

A skript:

feeling = document.getElementById("howyoufeel").value;

Pokud do skriptu nezavedeme explicitní kontroly, JavaScript bez problémů přijme jakoukoli uživatelskou hodnotu a zpracuje ji. Do proměnné „feeling“ tak můžete vložit cokoliv, například „234“, „@.#$%“ atd.

Charakteristika JavaScriptu

Z výše uvedeného můžeme odvodit následující vlastnosti JavaScriptu:

  • Je to slabě typovaný skriptovací jazyk.
  • Používá se pro skriptování na straně klienta i serveru (s pomocí Node.js).
  • Je flexibilní a dynamický.
  • Je podporován všemi hlavními prohlížeči.
  • Je lehký a interpretovaný.

Pokud máte zájem naučit se JavaScript, podívejte se na tento kurz na Udemy.

Co je to TypeScript?

Aplikace v reálném světě často vyžadují komplexní validace a dynamické kontroly. U takových aplikací se v určitém okamžiku může stát testování kódu JavaScript problematické, zejména z důvodu absence typové kontroly. Je důležité ověřovat typy dat získaných od uživatelů hned na začátku. A právě zde přichází na scénu TypeScript.

TypeScript je silně typovaný jazyk, který obsahuje kompilátor, který hlásí chyby, pokud nedefinujete typ proměnné.

Jak JavaScript, tak i TypeScript vycházejí ze specifikací ECMAScript pro skriptovací jazyky. TypeScript dokáže spouštět veškerý JavaScript kód a podporuje všechny jeho knihovny – proto je označován jako nadmnožina JavaScriptu.

Instalace TypeScriptu

Abychom mohli spustit náš předchozí kód v TypeScriptu, musíme nainstalovat kompilátor TypeScriptu pomocí balíčkovacího systému npm (za předpokladu, že máte nainstalovaný Node.js).

npm install -g typescript

Alternativně si ho můžete stáhnout přímo z oficiální stránky pro stahování společnosti Microsoft. Pro vyzkoušení si můžete také použít TS Playground, kde uvidíte, jak se kód transpiluje z .ts do .js.

Po instalaci můžete nakonfigurovat nastavení projektu v souboru tsconfig.json a pomocí libovolného IDE nebo textového editoru psát kód v TypeScriptu a ukládat ho s příponou .ts.

Stále je možné „vyhnout se“ definování typu proměnné a TypeScript může datový typ odvodit. Nicméně, pokud se pokusíte přiřadit proměnné jiný typ než ten, který byl použit poprvé (v našem případě String), dostanete při kompilaci chybu.

Pro snadnější údržbu a použití kódu je vždy doporučeno používat typovou anotaci:

var feeling: string = "happy";

Ale to není vše!

TypeScript nabízí mnoho dalších funkcí, které vývojářům usnadňují život.

Vlastnosti TypeScriptu

TypeScript disponuje bohatou sadou funkcí a každá nová verze přináší další vylepšení, která zjednodušují vývoj. Například nová verze (4.0) přinesla některé další funkce, jako jsou typy variadických n-tic, vlastní továrny JSX, odvození vlastností tříd z konstruktorů atd. Mezi typické vlastnosti TypeScriptu patří:

  • Podporuje objektově orientované programování, včetně rozhraní, dědičnosti, tříd a generik.
  • Umožňuje včasné odhalení chyb.
  • Nabízí podporu IDE s kontrolou syntaxe a návrhy.
  • Usnadňuje ladění během psaní kódu.
  • Je transpilován do JavaScriptu.
  • Používá se pro aplikace na straně serveru i klienta.
  • Poskytuje podporu mezi různými platformami a prohlížeči.
  • Podporuje všechny JavaScriptové knihovny a rozšíření.

Proč potřebujeme TypeScript? (Výhody TypeScriptu oproti JavaScriptu)

Společnost Microsoft vyvíjela a interně používala TypeScript dva roky předtím, než ho v roce 2012 zveřejnila. Vytvořili typovaný JavaScript, protože usnadňuje testování kódu pro podnikové aplikace na produkční úrovni. Stále můžete používat dynamické psaní, ale máte možnost explicitně definovat proměnné, když je to nezbytné.

Podívejme se na následující kód:

var mynum = //získané od uživatele;
addten(number){
  return number + 10;
}

Očekáváme, že výsledek bude vždy číslo. Ale co když uživatel zadá například „ovce“? Výsledkem bude „ovce10“ – ideálně bychom měli uživatele upozornit, že tato operace není možná!

Když máte k dispozici informace o typech, textové editory a IDE se stanou užitečnějšími pro psaní a odhalování chyb za běhu. Usnadňuje se také pozdější refaktorování kódu.

Znamená to, že JavaScript už není potřeba? (Nevýhody TypeScriptu oproti JavaScriptu)

TypeScript si můžete představit jako rozšíření JavaScriptu, ale rozhodně ne jako jeho náhradu.

Pro menší úseky kódu může být TypeScript nadbytečný – instalace, kompilace a transpilace mohou být zbytečné. V JavaScriptu můžete jednoduše vložit skript do HTML a hned funguje. Ladění kódu je také jednodušší, protože můžete jen aktualizovat prohlížeč pokaždé, když provedete změnu.

Vzájemné srovnání

Nyní, když rozumíme vlastnostem a výhodám TypeScriptu a JavaScriptu, podívejme se na jejich další srovnání:

TypeScript JavaScript
Typovaný jazyk, který odhaluje chyby při kompilaci. Chyby se mohou objevit až za běhu.
Vhodný pro velké projekty, protože zvyšuje udržovatelnost a čitelnost kódu. S narůstajícím množstvím kódu se testování a ladění stává náročnějším, takže JS je vhodnější pro malé projekty.
Nadmnožina JS, nabízí funkce jako objektově orientované programování, typovou kontrolu a další. Skriptovací jazyk, který umožňuje dynamické vytváření webového obsahu.
Vyžaduje instalaci kompilátoru a nastavení konfigurace. Nevyžaduje instalaci; JS kód lze psát přímo v prohlížeči pomocí tagu <script>.
Všechny soubory .ts se před spuštěním převádějí na .js soubory, proces se nazývá transpilace. Vývojáři mohou .js soubory přímo zahrnout do HTML souborů pro spuštění pomocí tagu <src>.
Výkonný a intuitivní, nabízí bohaté funkce jako moduly, generika, rozhraní. Vhodný pro jednoduché webové aplikace, které nevyžadují pokročilé funkce.
Používá se pro skriptování na straně serveru i klienta. Snadný na použití pro skriptování na straně klienta, ale pro skriptování na straně serveru je náročnější.
Spuštění trvá déle kvůli kroku kompilace. Nevyžaduje kompilaci, proto je spuštění rychlejší.
Podporuje statické i dynamické psaní. Podporuje pouze dynamické psaní.
Umožňuje definovat typové anotace, například:
var pocit: string = "šťastný";		 Typové anotace nelze použít, protože neumí definovat typy.

Závěr

Pokud se chcete učit, JavaScript by mohl být vaší přirozenou volbou. Otevřete soubor, napíšete kód do značek <script></script>, uložíte jako HTML a hned uvidíte výsledky! Na tomto základu pak můžete dále stavět a vytvářet dynamičtější obsah.

Později, až budete pracovat na rozsáhlých aplikacích, znalost JavaScriptu vám usnadní přechod na TypeScript.

Nicméně z hlediska kariéry a finančního ohodnocení, jako TypeScript vývojář, budete flexibilnější a pohodlněji si povedete s JS i TS projekty – což z vás dělá cennějšího kandidáta na trhu práce. Typicky jsou vývojáři TypeScriptu placeni mezi 110 000 a 147 000 dolary ročně, zatímco vývojáři JS se pohybují v rozmezí od 63 000 do 118 000 dolarů ročně.