Jak přenést svůj JavaScript program do TypeScript

JavaScript, který byl původně vydán v roce 1995 po neuvěřitelně krátké době vývoje, se od té doby stal nedílnou součástí mnoha webů a aplikací. Dnes si JavaScript našel domov v klientských i serverových aplikacích. Vývojáři stále požadují spoustu funkcí, navzdory všem změnám, které v průběhu let prošly.

TypeScript je skriptovací jazyk, který rozšiřuje JavaScript o mnoho z těchto dlouho očekávaných funkcí. Typová anotace, vlastní psaní a rozhraní jsou hlavní součásti spolu s lepšími nástroji pro zvýšení produktivity.

Proč se obtěžovat přepínáním?

Vyhlídka na změnu jazyků u velkých projektů může být stresující. Naštěstí pro každého, kdo o tomto úkolu uvažuje, je proces portování projektu z JavaScriptu do TypeScriptu poměrně jednoduchý.

JavaScript se v posledních několika letech prosadil jako hlavní programovací jazyk. Vydání Node.js, původně používané pouze pro front-end skriptování na webových stránkách, přineslo JavaScript na straně serveru, což pomohlo rozšířit jeho popularitu.

Zatímco JavaScript se v poslední době stal mnohem populárnějším, existuje spousta funkcí, které jeho nejnovější implementaci, ES6, stále chybí. Pro mnoho vývojářů tyto chybějící funkce omezují užitečnost JavaScriptu jako jazyka.

TypeScript se snaží tyto obavy napravit tím, že zabalí JavaScript do dalších funkcí a poté transpiluje uživatelský kód. Výsledkem je typově bezpečný jazyk se snadností a použitelností JavaScriptu.

Již existuje několik nástrojů a rámců s plnou podporou TypeScript. Angular to používá už dlouho a dokonce React má způsoby, jak implementovat TypeScript.

TypeScript je jako vylepšený JavaScript

TypeScript implementuje mnoho funkcí, které vývojáři často požadují v JavaScriptu. TypeScript je pojmenován pro úplný typový systém, který implementuje, včetně funkcí, jako je kontrola typu, bezpečnost a implicitní psaní. TypeScript vám to dokonce umožňuje definovat a používat vlastní jmenné prostory.

TypeScript také obsahuje rozhraní, výčty a odvození typu. TypeScript zachovává podporu funkcí z nejnovější implementace JavaScriptu spolu se staršími funkcemi a přidává sadu nových funkcí.

Celkově se TypeScript zaměřuje na vytvoření bezpečnějšího vývojového procesu se silnějšími nástroji na pomoc kodérům.

Podporuje typově bezpečný kód

TypeScript používá k ověření typů proměnných vestavěný systém kontroly typu. Obsahuje sadu standardních typů s možností definovat vlastní třídy a typy. Typy mohou být explicitně deklarovány nebo odvozeny na základě přiřazení.

TypeScript má několik standardních datových typů, včetně řetězců, čísel, booleanů a n-tic. Existují také typy proměnných, jako neznámé a jakékoli, které vám umožňují používat slabě napsaný kód.

Odvozování typu TypeScript vám umožňuje spouštět kontroly typu i u standardního kódu JavaScript spuštěním přes transpiler TypeScript.

Transpilace usnadňuje použití

Z pohledu vývojáře je jednou z nejlepších vlastností TypeScript to, že poskytuje vanilkový JavaScript. Kód TypeScript můžete spustit procesem známým jako transpilace, který je podobný kompilaci.

Spíše než spustitelný soubor je výsledkem transpilace skript v jiném jazyce, než je původní kód.

Kód TypeScript se transpiluje do JavaScriptu, který pak můžete spustit na serveru nebo klientovi. To vám umožní rychle a snadno psát kód, který můžete spustit na téměř jakékoli platformě.

TypeScript napomáhá produktivitě vývojáře

Přidání typů do JavaScriptu umožňuje nejen bezpečné spouštění kódu, ale také poskytuje vývojářům nástroje, které kódování usnadňují. Většina moderních IDE nabízí podporu TypeScript, která umožňuje nástrojům pro dokončování kódu, jako je IntelliSense, nabídnout kódu další kontext. Může také nabídnout kontrolu typu během psaní, což vám pomůže rychleji zachytit chyby.

Další datové struktury a syntaxe TypeScriptu jsou navíc navrženy tak, aby zlepšily čitelnost kódu. Tyto funkce umožňují rychlejší a snadnější vytváření vysoce kvalitního kódu a odhalení potenciálních problémů dříve, než se stanou problematickými.

Jak můžete přenést svůj kód?

Pokud začínáte zcela nový projekt, vytvoření nového projektu TypeScript je docela jednoduché. Převod již existujícího projektu na TypeScript je však o něco složitější.

Za většiny normálních okolností je vyhlídka na převod projektu z jednoho jazyka do druhého děsivá. Převod z JavaScriptu do TypeScript je však překvapivě jednoduchý.

TypeScript jako nadmnožina JavaScriptu

TypeScript je považován za nadmnožinu JavaScriptu. To znamená, že TypeScript přidává další vrstvy syntaxe a funkčnosti, aniž by měnil nebo odstraňoval základní funkce, které vytváří.

Pro vývojáře to znamená, že jakýkoli kód, který běží správně v JavaScriptu, bude automaticky správně fungovat i v TypeScriptu. Ať už je daný skript webový server napsaný pro běh v NodeJS, nebo sada front-endových skriptů pro webovou stránku, přepínání je výjimečně jednoduché.

Po instalaci transpileru TypeScript můžete vytvořit jednoduchý tsconfig.json soubor s následujícím obsahem:

{
"možnosti kompilátoru": {
"outDir": "./stavět",
"allowJs": skutečný,
"cílová": "es5"
 },
"zahrnout": ["./src/**/*"]
}

Přesuňte všechny použitelné soubory do adresáře src a spusťte transpiler. Tím se vytvoří výsledné soubory JavaScriptu v stavět adresář.

Tyto rychlé a jednoduché změny převedou standardní JavaScriptový projekt na TypeScript. Odtud můžete volně využívat nové funkce, které TypeScript nabízí. Můžete anotovat typy proměnných, implementovat vlastní typy a definovat rozhraní.

Po každé transpilaci můžete použít výstup z stavět adresář podle potřeby přidáním souborů do libovolného projektu stejně jako normálně. Transpiler napíše check standardní JavaScript a převede nové funkce na platné ES5 skripty.

Co potřebujete vědět, abyste mohli přejít od JS k TS

Proces převodu projektu z JavaScriptu do TypeScript je výjimečně snadný. Převod je stejně jednoduchý jako přepnutí adresářové struktury, přidání konfiguračního souboru a instalace transpileru.

Získání všech výhod z nového jazyka však může být mnohem delší projekt. Zatímco TypeScript může odvodit typ každé proměnné v projektu, měly by být explicitně deklarovány. Procházení a přidávání vlastních typů do projektu, přidávání správných anotací a vytváření rozhraní může být časově náročné.

Přidání těchto funkcí do projektu vám však umožní využívat výhod, které přináší správná kontrola typu a rozšířené nástroje. Velké projekty se budou stavět rychleji a snadněji, chyby odhalíte dříve a noví vývojáři budou mít snazší čas na čtení vašeho kódu.