Co je TypeScript?

Vítejte v kurzu TypeScriptu! JavaScript už znáte, a tak víte, jak snadno se do programu vloudí drobná chyba: překlep v názvu vlastnosti, číslo zapsané jako text nebo proměnná, ve které je něco jiného, než jste si mysleli. JavaScript si nestěžuje. Program spustí a chyba se projeví až později, jako podivné undefined, NaN nebo pád programu, často daleko od řádku, který ji způsobil. A někdy se neprojeví vůbec a program jen potichu počítá špatně.

TypeScript je JavaScript s typy. Typ říká, o jaký druh hodnoty jde: číslo, text, true nebo false, seznam názvů předmětů nebo třeba objekt se jménem a životy. TypeScript zná typ každé hodnoty ve vašem programu a hlídá, abyste s každou zacházeli správně. A dělá to dřív, než se program spustí. Tady je hrdinka a jeden řádek s překlepem:

const hrdina = { jmeno: "Kira", zivoty: 50 };
console.log(hrdina.zivty);

JavaScript by vypsal undefined a pokračoval, jako by se nic nestalo. TypeScript program vůbec nespustí. Místo toho vám řekne, co je špatně a kde:

main.ts(2,20): error TS2551: Property 'zivty' does not exist on type '{ jmeno: string; zivoty: number; }'. Did you mean 'zivoty'?

Program na řádku 2 čte vlastnost zivty, kterou hrdinka nemá. Nemysleli jste zivoty? Číst takové hlášky se naučíte hned v této lekci.

TypeScript vytvořila firma Microsoft a jeho první verze vyšla v roce 2012. Dnes patří k nejoblíbenějším programovacím jazykům na světě a používá ho mnoho velkých javascriptových projektů. Je v něm napsaný například editor kódu Visual Studio Code. Programátoři ho mají rádi ze dvou důvodů: typy zachytí chyby včas a navíc každému, kdo kód čte, řeknou, co je která hodnota zač.

TypeScript stojí na JavaScriptu. Všechno, co jste se naučili v kurzu JavaScriptu, v TypeScriptu funguje a píše se stejně: console.log, proměnné, podmínky, cykly, pole, funkce i objekty. TypeScript jen přidává typy. Proto je každý program v JavaScriptu zároveň programem v TypeScriptu. TypeScript v něm nanejvýš najde chyby, nebo vás požádá, abyste doplnili typ tam, kde ho sám nepozná.

Webové prohlížeče ale TypeScript spustit neumějí, rozumějí jen JavaScriptu. Program v TypeScriptu proto nejdřív zpracuje překladač. Ten zkontroluje typy a potom program převede na JavaScript: typy odstraní a zbude obyčejný JavaScript, který se spustí tak, jak to znáte. Soubory s programy v TypeScriptu mají místo přípony .js příponu .ts. Tady je váš program v souboru main.ts.

Na tomto webu pracuje překladač přímo ve vašem prohlížeči. Je to tsrs, verze překladače TypeScriptu 7 upravená tak, aby běžela na webové stránce. Když kliknete na Spustit, překladač váš program nejdřív zkontroluje. Pokud najde typovou chybu, program se vůbec nespustí a pod výstupem uvidíte červenou chybovou hlášku. Spustí se jen program bez typových chyb, a ten pak běží úplně stejně jako v kurzu JavaScriptu.

Co vás čeká? Nejdřív se naučíte základní typy, uvidíte, jak je TypeScript sám odvozuje, a doplníte typy funkcím a objektům. Pak přijde to, v čem je TypeScript opravdu silný: hodnoty, které mohou mít jeden z několika typů, data popsaná tak, že nesmyslné kombinace nejdou ani zapsat, generika, která fungují s jakýmkoli typem, a třídy. Příklady jsou ze hry na hrdiny: hraničářka Kira, její lektvary, meče a zlato, skřeti, vlci, drak a úkoly. V závěrečném projektu z toho všeho sestavíte Kiřin inventář a deník úkolů a uvidíte, jak TypeScript najde v programu každé místo, které musíte změnit, když přidáte něco nového.

Ze všeho nejdřív si ale vyzkoušejte, že JavaScript tu funguje tak, jak ho znáte. Program v editoru je čistý JavaScript bez jediného typu, a přesto je to platný program v TypeScriptu.