Jednou z častých otázek, které dostávám, je, jaký je rozdíl mezi JavaScriptem a Typescriptem?
Pojďme to zjistit…
Od chvíle, kdy jste začali kódovat, byl JavaScript (JS) součástí všech vašich front-endových projektů. Pokud jste trochu obeznámeni s JS, představte si TypeScript jako JS plus některé další funkce, díky kterým bude vaše aplikace přehlednější a typická. TypeScript byl vyvinut jako open-source projekt společnosti Microsoft, aby byl vývoj JS efektivnější a včas zachytil chyby kompilace.
V tomto článku probereme některé důležité funkce JavaScriptu a TypeScriptu a rozdíly mezi oběma skriptovacími jazyky.
Table of Contents
Co je JavaScript?
JavaScript se používá pro skriptování na straně klienta. Můžete vytvořit skript na stránce HTML nebo vytvořit soubor s příponou .js a zahrnout jej do souboru HTML. Běžným příkladem v reálném světě, kde můžete vidět JavaScript, je ověření přihlašovací stránky, kde se zobrazí chyba, když je vaše uživatelské jméno/heslo nesprávné.
Pojďme napsat jednoduchý JS kód a spustit jej v prohlížeči:
Vytvořte soubor example.html a přidejte následující kód:
<script> feeling = 'happy'; feeling = 23; </script>
Tento jednoduchý kód deklaruje proměnnou a přiřadí jí hodnotu happy (řetězec). Stejné proměnné můžeme přiřadit hodnotu jiného typu (čísla). JavaScript by si na to nestěžoval a kód můžeme bez problémů spustit v jakémkoli prohlížeči. Nyní se podívejme na hodnotu pocitu od uživatele:
Naše HTML bude vypadat takto:
<input type = "textbox" id = "howyoufeel">
a skript bude:
feeling = document.getElementById("howyoufeel").value;
Pokud do skriptu nevložíme explicitní kontroly, JS přijme jakoukoli hodnotu od uživatele a předá ji dál. Do proměnné feeling tedy můžete vložit cokoliv jako 234, @.#$% atd.
Vlastnosti JavaScriptu
Z výše uvedeného můžeme pozorovat následující vlastnosti JavaScriptu:
- Slabě napsaný skriptovací jazyk
- Používá se pro skriptování na straně klienta a serveru (s node.js).
- Pružné a dynamické
- Podporováno všemi hlavními prohlížeči
- Lehký a interpretovaný
Pokud máte zájem o zvládnutí JavaScriptu, podívejte se na toto Kurz Udemy.
Co je TypeScript?
Aplikace v reálném světě bude mít mnoho validací a dynamických kontrol. U takových aplikací bude v určitém okamžiku obtížné testovat kód JavaScript, hlavně proto, že neexistuje žádná kontrola typu. Při získávání hodnot od uživatelů je důležité získat je hned na začátku. Zde se objevuje TypeScript.
TypeScript je silně typovaný a má kompilátor, který si stěžuje, pokud nedefinujete typ proměnné.
JavaScript i TypeScript odpovídají specifikacím ECMAScript pro skriptovací jazyk. Typescript umí spouštět veškerý JavaScript kód a podporuje všechny jeho knihovny – proto se mu říká nadmnožina JavaScriptu.
Instalace TypeScript
Abychom mohli spustit náš předchozí kód v TypeScript, musíme nainstalovat kompilátor TypeScript pomocí balíčku npm (pokud máte node js).
npm install -g typescript
nebo si jej stáhněte přímo od úředníka Stránka Microsoft ke stažení. Můžete také použít TS hřiště abyste viděli, jak je kód trans-kompilován z ts do js.
Jakmile to uděláte, můžete nakonfigurovat nastavení projektu v tsconfig.json a pomocí libovolného IDE nebo textového editoru napsat kód TypeScript a uložit jej jako .ts.
Stále můžete uniknout tím, že nedefinujete typ proměnné a TypeScript může odvodit datový typ. Pokud však zadáte něco jiného než první použitý typ (v našem případě String) – při samotné kompilaci, dostanete chybu „pocit“.
Je vždy vhodné, aby kód měl typovou anotaci pro snadnou údržbu a použití:
var feeling: string = “happy”;
To není ono!
TypeScript poskytuje mnoho dalších funkcí, které usnadňují vývojářům život.
Vlastnosti TypeScriptu
Typescript má bohatou sadu funkcí a každé vydání přichází s novými funkcemi, které usnadňují vývoj než dříve. Například s novým vydáním (4.0) některé další funkce jsou typy variadických n-tic, vlastní továrny JSX, odvození vlastností třídy z konstruktorů atd. Některé typické vlastnosti TypeScriptu jsou:
- Podporuje objektově orientované programovací koncepty, jako je rozhraní, dědičnost, třída. generika
- Včasné odhalení chyb
- Podpora IDE s kontrolou syntaxe a návrhy
- Snazší ladění při psaní
- Trans-kompiluje do JavaScriptu
- Používá se pro aplikace na straně serveru i klienta
- Podpora mezi platformami a prohlížeči
- Podporuje všechny JS knihovny a rozšíření
Proč potřebujeme TypeScript? (Výhody TypeScriptu oproti JavaScriptu)
Microsoft vyvíjel a používal TypeScript dva roky pro své interní projekty, než jej zveřejnil v roce 2012. Vytvořili typizovaný JavaScript, protože bylo snazší testovat kód pro podnikové aplikace produkční úrovně. Stále můžete používat funkce dynamického psaní, ale také zadávat proměnné, když je to opravdu potřeba.
Zvažte níže uvedený kód:
var mynum = //get from user;
addten(number){
return number + 10;
}
Očekávali bychom, že výsledkem bude vždy číslo. Ale co když uživatel dá „ovce“? Výstup bude ovce10 – v ideálním případě musíme uživateli sdělit, že tato operace není možná!
Také, když máte k dispozici informace o typu, textové editory a IDE se stanou užitečnějšími pro použití a ukládání chyb za běhu. Je také snazší refaktorovat kód později.
Znamená to, že nepotřebujeme JavaScript? (Nevýhody TypeScriptu oproti JavaScriptu)
TypeScript si můžete představit jako rozšíření JavaScriptu, ale rozhodně ne jako náhradu.
Pro menší kusy kódu se TypeScript může stát režií – instalace, kompilace a trans-kompilace budou nadbytečné. S JavaScriptem můžete jednoduše napsat svůj skript v HTML a bude to fungovat. Je také snazší ladit kód, když můžete jednoduše aktualizovat prohlížeč pokaždé, když něco změníte.
Vzájemné srovnání
Nyní, když jsme porozuměli funkcím a výhodám TypeScriptu a JavaScriptu, pojďme si projít další srovnání:
TypeScript
JavaScript
Typovaný jazyk, který zachycuje chyby při kompilaci na začátku
Chyby můžete zjistit během běhu
Vhodné pro velké projekty, protože zlepšuje udržovatelnost a čitelnost kódu
Jak se přidává více kódu, je obtížné testovat a ladit, takže JS je vhodný pro malé projekty
Nadmnožina JS, tj. funkce jako objektová orientace, typová kontrola a další
Skriptovací jazyk, který podporuje dynamické vytváření webového obsahu
Vyžaduje instalaci kompilátoru a nastavení konfigurace
Není potřeba žádná instalace; JS kód lze zapsat přímo v prohlížeči pomocí tagu , uložíte to jako HTML – uvidíte výsledky! Na něm pak můžete stavět a vytvářet dynamičtější obsah.
Dále, když pracujete na rozsáhlé aplikaci, znalost JavaScriptu vám pomůže snadno přejít na TypeScript.
Nicméně z pohledu kariéry a platu, jako a Vývojář TypeScript, budete flexibilnější a pohodlnější s JS i TS projekty – takže rozhodně lepší aktivum na trhu. Typicky jsou vývojáři TypeScript placeni mezi 110 000 a 147 000 $, zatímco vývojáři JS jsou placeni kolem 63 000 $ až 118 000 $ ročně.