Ako preniesť svoj JavaScript program do TypeScript

JavaScript, ktorý bol pôvodne vydaný v roku 1995 po neuveriteľne krátkom období vývoja, sa odvtedy stal neoddeliteľnou súčasťou mnohých stránok a aplikácií. Dnes si JavaScript našiel domov v aplikáciách na strane klienta aj servera. Vývojári stále požadujú množstvo funkcií, napriek všetkým zmenám, ktoré v priebehu rokov prešli.

TypeScript je skriptovací jazyk, ktorý rozširuje JavaScript o mnohé z týchto dlho očakávaných funkcií. Anotácia typu, vlastné písanie a rozhrania sú hlavné komponenty spolu s lepšími nástrojmi na zvýšenie produktivity.

Prečo sa obťažovať prepínaním?

Vyhliadka na zmenu jazyka pri veľkých projektoch môže byť stresujúca. Našťastie pre každého, kto zvažuje túto úlohu, je proces prenosu projektu z JavaScriptu do TypeScript pomerne jednoduchý.

JavaScript sa v posledných rokoch presadil ako hlavný programovací jazyk. Vydanie Node.js, ktoré sa pôvodne používalo iba na front-end skriptovanie na webových stránkach, prinieslo JavaScript na strane servera, čo pomohlo rozšíriť jeho popularitu.

Aj keď sa JavaScript stal v poslednej dobe oveľa populárnejším, existuje množstvo funkcií, ktoré jeho najnovšej implementácii, ES6, stále chýbajú. Pre mnohých vývojárov tieto chýbajúce funkcie obmedzujú užitočnosť JavaScriptu ako jazyka.

TypeScript sa snaží napraviť tieto obavy tým, že zabalí JavaScript do ďalších funkcií a potom preloží kód používateľa. Výsledkom je typovo bezpečný jazyk s jednoduchosťou a použiteľnosťou JavaScriptu.

Existuje už niekoľko nástrojov a rámcov s plnou podporou TypeScript. Angular ho používa už dlho a dokonca React má spôsoby, ako implementovať TypeScript.

TypeScript je ako vylepšený JavaScript

TypeScript implementuje mnoho funkcií, ktoré vývojári často požadujú v JavaScripte. TypeScript je pomenovaný pre úplný typový systém, ktorý implementuje, vrátane funkcií, ako je kontrola typu, bezpečnosť a implicitné písanie. TypeScript vám to dokonca umožňuje definovať a používať vlastné menné priestory.

TypeScript obsahuje aj rozhrania, enumerácie a odvodzovanie typu. TypeScript zachováva podporu funkcií z najnovšej implementácie JavaScriptu spolu so staršími funkciami a pridáva sadu nových funkcií.

Vo všeobecnosti sa TypeScript zameriava na vytvorenie bezpečnejšieho vývojového procesu so silnejšími nástrojmi na pomoc programátorom.

Podporuje typovo bezpečný kód

TypeScript používa na overenie typov premenných vstavaný systém kontroly typu. Obsahuje sadu štandardných typov s možnosťou definovania vlastných tried a typov. Typy môžu byť explicitne deklarované alebo odvodené na základe priradenia.

TypeScript má niekoľko štandardných dátových typov vrátane reťazcov, čísel, boolovských hodnôt a n-tic. Existujú aj typy premenných, napríklad neznáme a ľubovoľné, ktoré vám umožňujú používať slabo napísaný kód.

Vyvodenie typu TypeScript vám umožňuje vykonávať kontroly typu aj v štandardnom kóde JavaScript spustením cez transpiler TypeScript.

Transpilácia uľahčuje použitie

Z pohľadu vývojára je jednou z najlepších vlastností TypeScript to, že poskytuje vanilkový JavaScript. Kód TypeScript môžete spustiť procesom známym ako transpilácia, ktorý je podobný kompilácii.

Namiesto spustiteľného súboru je výsledkom transpilácie skript v inom jazyku, ako je pôvodný kód.

Kód TypeScript sa transpiluje do JavaScriptu, ktorý potom môžete spustiť na serveri alebo klientovi. To vám umožní rýchlo a jednoducho napísať kód, ktorý môžete spustiť na takmer akejkoľvek platforme.

TypeScript pomáha produktivite vývojárov

Pridanie typov do JavaScriptu nielenže umožňuje bezpečné spustenie kódu, ale tiež poskytuje vývojárom nástroje, ktoré uľahčujú kódovanie. Väčšina moderných IDE ponúka podporu TypeScript, ktorá umožňuje nástrojom na dokončenie kódu, ako je IntelliSense, ponúknuť dodatočný kontext kódu. Môže tiež ponúknuť kontrolu typu počas písania, čo vám pomôže rýchlejšie zachytiť chyby.

Okrem toho sú dodatočné dátové štruktúry a syntax TypeScript navrhnuté tak, aby zvýšili čitateľnosť kódu. Tieto funkcie umožňujú rýchlejšie a jednoduchšie vytvárať vysokokvalitný kód a odhaliť potenciálne problémy skôr, ako sa stanú problémovými.

Ako môžete preniesť svoj kód?

Ak začínate s úplne novým projektom, vytvorenie nového projektu TypeScript je celkom jednoduché. Konverzia už existujúceho projektu na TypeScript je však o niečo zložitejšia.

Za väčšiny normálnych okolností je vyhliadka na konverziu projektu z jedného jazyka do druhého desivá. Prevod z JavaScriptu do TypeScript je však prekvapivo jednoduchý.

TypeScript ako nadmnožina JavaScriptu

TypeScript sa považuje za nadmnožinu JavaScriptu. To znamená, že TypeScript pridáva ďalšie vrstvy syntaxe a funkčnosti bez zmeny alebo odstránenia základnej funkčnosti, na ktorej je postavený.

Pre vývojárov to znamená, že každý kód, ktorý správne beží v JavaScripte, sa automaticky správne spustí aj v TypeScript. Či už je daným skriptom webový server napísaný na spustenie v NodeJS, alebo súbor frontendových skriptov pre webovú stránku, prepínanie je výnimočne jednoduché.

Po nainštalovaní prekladača TypeScript môžete vytvoriť jednoduchý tsconfig.json súbor s nasledujúcim obsahom:

{
"možnosti kompilátora": {
"outDir": "./build",
"allowJs": pravda,
"cieľ": "es5"
 },
"zahrnúť": ["./src/**/*"]
}

Presuňte všetky použiteľné súbory do adresára src a spustite transpiler. Tým sa vytvoria výsledné súbory JavaScript v súbore stavať adresár.

Tieto rýchle a jednoduché zmeny prevedú štandardný JavaScript projekt na TypeScript. Odtiaľto môžete voľne využívať nové funkcie, ktoré TypeScript ponúka. Môžete anotovať typy premenných, implementovať vlastné typy a definovať rozhrania.

Po každej transpilácii môžete použiť výstup z stavať adresár podľa potreby pridaním súborov do ľubovoľného projektu tak, ako by ste to normálne robili. Transpiler napíše check štandardný JavaScript a prevedie nové funkcie na platné ES5 skripty.

Čo potrebujete vedieť, aby ste prešli od JS k TS

Proces prevodu projektu z JavaScriptu do TypeScript je výnimočne jednoduchý. Konverzia je taká jednoduchá ako prepnutie adresárovej štruktúry, pridanie konfiguračného súboru a inštalácia transpilera.

Získanie všetkých výhod z nového jazyka však môže byť oveľa dlhší projekt. Aj keď TypeScript dokáže odvodiť typ každej premennej v projekte, mali by byť explicitne deklarované. Prechádzanie späť a pridávanie vlastných typov do projektu, pridávanie správnych anotácií a vytváranie rozhraní môže byť časovo náročné.

Pridanie týchto funkcií do projektu vám však umožní využívať výhody, ktoré prináša správna kontrola typu a rozšírené nástroje. Veľké projekty sa budú stavať rýchlejšie a ľahšie, chyby identifikujete skôr a noví vývojári budú mať jednoduchší čas na čítanie vášho kódu.