Jak nainstalovat TypeScript
Online překladač TypeScriptu
Nejjednoduším způsobem jak si vyzkoušet TypeScript představuje hřiště na webu typescriptlang.org. Web obsahuje textový editor, který například umí napovídat kód, zvýrazní vám chyby, můžete si vybrat verzi TypeScriptu apod. Přinejmenším pro první osahání jazyka je to skvělý nástroj.
Instalace TypeScriptu na vás počítač
TypeScript je sám napsaný v TypeScriptu a je následně TypeScriptem přeložený do JavaScriptu. Distribuuje se tedy jako JavaScriptový modul přes NPM. Abychom byli schopni zprovoznit TypeScript u sebe na počítači, musíme být nejprve schopni spouštět JavaScript. Existuje několik možností, jak ho spouštět, ale my se podíváme na ten nejzákladnější a nejpoužívanější: NodeJS. Přejděte tedy na web nodejs.org/en/download a stáhněte si NodeJS verzi, která je pro váš operační systém. Na webu naleznete instalační balíčky pro všechny běžné operační systémy. Vyberte si LTS verzi (LTS = Long Term Support), měla by to být nejstabilnější verze. Pokud jste všechno nainstalovali správně, měli byste mít k dispozici dva základní příkazy v příkazové řádce node na spouštění JavaScriptového kódu a npm na instalaci NodeJS balíčků. Můžete si to ověřit v konzoli:
> npm -v
10.2.3
> node -v
v20.10.0
Přepínačem -v si necháme vrátit verzi daných programů – ta pochopitelně bude na vašem počítači jiná.
NPM
NPM je správce balíčků pro JavaScript, který umožňuje vývojářům snadno sdílet a opětovně používat kód. Jeho ekosystém se skládá z tisíců volně dostupných balíčků, které lze použít pro různé účely vývoje webových aplikací a dalších JavaScriptových projektů.
Teď už máme vše potřebné k tomu, abychom k sobě nainstalovali TypeScript. Otevřete opět příkazovou řádku, vytvořte prázdnou složku a v ní zavolejte
> npm init
Tím vytvoříme nový NPM modul. Příkaz se vás bude ptát na nějaké otázky jako je název modulu a podobně, je jedno jak odpovíte, klidně vždy ponechejte výchozí hodnotu. Poté zavolejte
> npm install typescript --save-dev
Tímto nainstalujeme Typescript knihovnu do našeho modulu. Můžeme si opět ověřit, že se instalace zdařila zavoláním příkazu
> npx tsc -v
Version 5.4.2
npx
npx je nástroj přicházející spolu s NPM, který umožňuje vývojářům spouštět nainastalované, ale i předem nenainstalované, javascriptové balíčky. Příkazem npx tsc jsme vlastně řekli počítači, aby spustil program, který se nachází na cestě ./node_modules/.bin/tsc. Zavoláme-li ./node_modules/.bin/tsc -v, získáme stejnou odpověď.
tsc
tsc je program, který jsme nainstalovali spolu s balíčkem Typescriptu. Je to zkratka pro “TypeScript Compiler”.
Překládáme a spouštíme TypeScriptový kód
Nyní už můžeme vytvořit náš první TypeScriptový kód. Vytvořme tak soubor text.ts s tímto obsahem:
function textLength(text: string): number {
return text.length;
}
console.log(textLength("Burzum")); // 6
Kód říká, že funkce textLength bere na vstupu jeden parametr jménem text, který je typu string a vrací typ number, tedy číslo. Můžeme tento soubor zkusit spustit přímo přes NodeJS takto:
> node text.ts
/Projects/typescript/text.ts:1
function textLength(text: string): number {
^
SyntaxError: Unexpected token ':'
Protože daný kód není validní JavaScript, zahlásí nám NodeJS chybu, protože nerozumí syntaxi text: string. Abychom byli schopni daný kód spustit, musíme ho nejdříve přeložit či transpilovat z TypeScriptu do Javascriptu.
Překlad vs. transpilace
Mezi překládáním zdrojového kódu a transpilací je drobný rozdíl, který ale není nijak důležitý. Pokud překládáme kód, většinou tím myslíme, že překládáme kód z vysokoúrovňového jazyka do nízkoúrovňového. Například když překládáme z jazyka C++ do strojového kódu. Pokud kód transpilujeme, tak také dochází k překladu jednoho kódu na jiný, ale transpiler pracuje s jazyky na přibližně stejné úrovni abstrakce. Kód v C++ bychom tak mohli transpilovat do C, což je jazyk na přibližně stejné úrovni. Podobně transpilujeme TypeScript do JavaScriptu, neboť to jsou jazyky na přibližně stejné úrovni. V dalším textu ale budeme TypeScript hlavně překládat do JavaScriptu, protože to zní víc česky a ostatně i program, který k tomu používáme, se nazývá tsc, tedy TypeScript Compiler (= TypeScript Překladač).
Překlad z TypeScriptu do JavaScriptu provedeme v příkazové řádce takto:
> npx tsc text.ts
Odpovědí by mělo být mlčení – pokud se vše podařilo. Měli bychom vidět vedle souboru text.ts ještě soubor text.js, který by měl mít tento obsah:
function textLength(text) {
return text.length;
}
console.log(textLength("Burzum")); // 6
Vidíme, že kód vypadá velmi podobně, jen zmizely typové anotace :string a :number. Překlad z TypeScriptu do JavaScriptu je vlastně poměrně jednoduchý – fakticky jen stačí smazat informace o typech z kódu a dostaneme z TypeScriptu validní JavaScript. Tento soubor už můžeme spustit pomocí NodeJS:
> node text.js
6
A program odpoví číslem 6, protože “Burzum” má šest písmen. Můžeme schválně zkusit udělat v našem programu chybu a namísto toho, abychom funkci textLength předali text, tak jí předáme číslo:
function textLength(text: string): number {
return text.length;
}
console.log(textLength(123)); // <-- Chyba!!!
Pokud nyní zkusíme program přeložit, TypeScript nám vrátí chybu:
> npx tsc text.ts
text.ts:5:24 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
5 console.log(textLength(123));
~~~
Překladač nám odmítl přeložit daný kód, protože funkci, která očekává číslo, nemůžeme poslat text. Chybová hláška je docela uživatelsky přívětivá a snaží se nám i naznačit, kde přesně jsme udělali chybu.