Přejít k navigační liště

Zdroják » JavaScript » K čemu je dobrý TypeScript

K čemu je dobrý TypeScript

Články JavaScript

TypeScript je určený pro aplikace obsahující mnoho javascriptového kódu. Jedná se o nadstavbu jazyka JavaScript. Nabízí typovou kontrolu, třídy, moduly rozhraní, IntelliSense a refactoring kódu. Jeho syntaxe je navržena tak, aby byla co nejvíce shodná se syntaxí ECMAScript 6.

Proč JavaScript nemá typovou kontrolu?

TypeScript tedy nabízí statickou typovou kontrolu. Proč se učit TypeScript a nepočkat, až bude někdy v budoucnu v JavaScriptu? Protože uvedení typů bylo součástí specifikace ECMASCript 4, ale ve výsledku od toho každý dával ruce pryč, až vznikla odlehčená specifikace ECMAScript 6, která typy neobsahuje. V současné době je typová kontrola pro JavaScript v nedohlednu.

Javascriptové běhové prostředí Chakra, které je v Internet Exploreru, si vytváří pro zvýšení výkonu datové typy dynamicky při vykonávání kódu. Zpovzdálí je výsledek poněkud zvláštní. Typový jazyk, který je nezbytný pro velké množství kódu, se přeloží do jazyka bez typové kontroly, ve kterém se typy zase složitě dohledávají, protože bez toho na současných procesorech není možné dosáhnout vysokého výkonu.

Statické datové typy jsou nezbytností pro rozvoj nástrojů pro vývojáře, které pak mohou nabídnout podporu refactoringu kódu, hledání referencí a samozřejmě IntelliSence.

Pokud voláme například REST služby, které nám vracejí data ve formátu JSON, neznáme jejich schéma. Nejsnadnější způsob jejich parsování nabízí dynamický jazyk, který mapuje metody jazyka na data (metoda JSON.parse). Pro tento scénář dává čistě dynamický jazyk smysl. Když však s těmito daty pracujeme, musíme mít jejich strukturu v hlavě. Snadno se pak dělají chyby. TypeScript nabízí rozhraní, které popisuje, jaké má objekt vlastnosti a jakého jsou typu, čímž nahrazuje schéma. To umožňuje používat IntelliSense pro vlastní data.

Dalším příkladem je práce s DOM, jehož struktura je dopředu známá. Díky tomu je možné využít IntelliSense, který urychluje práci. Soubor, který popisuje datové typy DOM a z něhož Visual Studio čerpá informace pro IntellSense do TypeScriptu, má přes 8 000 řádek. Všechny si je už nikdo nemůže zapamatovat. TypeScript však ano.

Kde se TypeScript nejvíce používá?

Pilotní aplikace pro testování jazyka TypeScript je aplikace Xbox Music, která běží na Windows 8 a Xbox One. Obsahuje přes půl milionu řádků typescriptového kódu. TypeScript také používají produktové týmy Bing Maps, Office 365 a Office Web Apps. Mezi dalšími uživateli TypeScriptu je společnost Adobe.

Čím se TypeScript liší od podobných jazyků?

Existují podobné jazyky, které přinášejí obdobné výhody. Patří mezi ně například CoffeeScript, Script# a Dart. Zatímco TypeScript je rozšíření JavaScriptu, CoffeeScript je odlišný jazyk a není typový. Nemůžete například vzít své javascriptové soubory, přejmenovat je na CoffeeScript a rozšiřovat je. Dart nabízí odlišné prostředí než JavaScript, ale za cenu toho, že se v JavaScriptu musí uměle vytvářet. To výrazně snižuje výkon. Script# je na tom podobně. TypeScript injektuje váš kód, jedině když použijete dědičnost. I tak se ale jedná jen o 6 řádků kódu. TypeScript je jediný jazyk, který je rozšířením JavaScriptu a nabízí statické typy.

Přísně typový jazyk C# má také dynamický datový typ. Umožňuje to, co dynamické jazyky, jako například JavaScript, jen s tím rozdílem, že hlídá typovost až za běhu. JavaScript má vlastní systém a TypeScript se ho nesnaží nijak měnit. Pouze záměrně programátora více svazuje a zajišťuje mu tím větší podporu, takže neudělá chybu tak snadno. Veškerá typovost se v době překladu ztrácí. Proto nesnižuje výkon.

IntelliSense i pro JavaScript

Podpora IntelliSense pro WinJS by se měla považovat za samozřejmost. Je WinJS TypeScript? Ano, protože JavaScript je podmnožinou TypeScriptu. Otázka zní, jestli je WinJS napsaná v TypeScriptu, aby podporovala typovou kontrolu. Je to však jedno, protože typová kontrola může být poskytnuta i pro javascriptový kód. Je k tomu však potřebný soubor s deklaracemi. V současné době jsou soubory s deklaracemi k dispozici pro většinu javascriptových knihoven. Najdete je na stránce DefinitelyTyped.

IntelliSense vyžaduje typový jazyk. Tento příklad ilustruje, jak datové typy protékají kódem.

var a = ["hello", "world"];
var n = a.map(s => s.length);
/*
proměnná a je typu array<string>
proměnná s je typu string a Visual Studio může nebídnout IntelliSence
proměnná n je typu array<number>
*/

Co když nemám Visual Studio?

TypeScript je open source a podporují ho mnohá vývojová prostředí. Kromě doplňku pro Visual Studio je k dispozici například pro JetBrains WebStorm a PhpStorm pro Mac OS X i Linux.

Asynchronní kód v budoucnu

Proč TypeScript ještě nemá async & await po vzoru jazyků F# a C#? Sice už existuje fork TypeScriptu, který toto pohodlné asynchronní programování podporuje, ale Anders Hejlsberg se rozhodl počkat až na ECMAScript 6. Ten bude podporovat iterátory, které dovolují zkompilovat asynchronní TypeScript kód do JavaScriptu mnohem efektivněji. Bez iterátorů by byl kód příliš odlišný od zdrojového a implementovat podporu pro ladění do Visual Studia by bylo velice obtížné.

Shrnutí

Co tedy TypeScript nabízí?

  • Statické datové typy
  • Třídy a dědičnost
  • Moduly
  • Rozhraní
  • Generické datové typy
  • Kovariance a kontravariance

Co může IDE díky TypeScriptu nabídnout?

  • IntelliSence pro vlastní kód, javascriptové knihovny i DOM
  • Zvýraznění chyby podtržením kódu
  • Refactoring
  • Příkazy Go To Definition a Find All References

Příklady

Obvykle se snažím uvádět příklady kódu, ale v tomto případě jsem se rozhodl odkázat na web typescriptlang.org, kde jsou všechny přednosti jazyka TypeScript vysvětleny stručně a názorně.

Komentáře

Subscribe
Upozornit na
guest
13 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
dl

Díky, pěkný stručný úvod do TS.

bono

Netbeans plugin odkazovany v clanku je trochu neco jineho – TypoScript – coz je jezyk pouzity v Typo3 CMS systemu a s TypeScriptem nema nic spolecneho.

Dundee5

TypeScript má dobrou podporu ve WebStormu, PhpStormu a Sublime.

maryo

Bohužel ale WebStorm nepoužívá typescriptService a Sublime plugin není zase s nejnovější kompatibilní :-/. Docela zajímávej je taky CATS, editor ve vývoji běžící na node-webkit a AceEditoru.

JanTvrdik

Jsem velký fanoušek TypeScriptu, ale tenhle článek mě vyloženě sere zkreslováním a neúplností informací a vůbec použitým úhlem pohledu. Pořád nechápu, proč má tolik článků potřebu dívat se na TypeScriptu z pohledu C#. Ty jazyky spolu přitom mají velmi málo společného (jiná architektura i primární použití). Mnohem větší smysl mi dává se na TypeScript dívat z pohledu JS. Tam jsou pak jasně vidět ty dva základní pilíře, na kterých TS stojí.

1. Rozšíření jazyka o moduly, třídy, rozhraní apod.
Většina z těchto věcí se v identické nebo podobné variantě dostane do ECMAScript 6 Harmony. Nutno podotknout, že ES6 toho plánuje přidat ještě o mnoho více, než to, co v současnosti umí TS. To podstatné, co ale TS nabízí, je možnost tyto novinky používat už nyní. Nejpopulárnější alternativou je tady asi bezpochyby CoffeeScript. V budoucnu může být hodně zajímavý i Dart.

2. Typová kontrola
Tohle je věc, která se do JS (resp. ES obecně) nedostane vůbec, nebo rozhodně ne v brzké době. Je důležité zmínit, že typový systém TS byl navržen na míru reálně existujícímu JS. Díky tomu je možné typově popsat i takové prasárny (z hlediska návrhu) jako je jQuery. Stejně tak je ale důležité zmínit, že typová kontrola je zcela volitelná a pokud vám vyhovuje psát bez typů stejně jako v JS, tak to v TS nepředstavuje žádný problém.
Nejpoužívanější alternativou (nechápu proč není zmíněna v článku) je psaní anotací pro Google Closure Compiler. Tyto anotace je zároveň možné zkombinovat i s CoffeeScriptem (viz Este.js od Steigerwalda) a pak dostáváme jak typovou kontrolu, tak třídy. Velkou výhodu oproti TS je navíc špičková JS knihovna a kompilátor (s advanced modem a dead code removal), který pokud vím nemá žádnou alternativu. TypeScript je ale oproti tomu výrazně jednodušší na zprovoznění a osobně mi jeho syntaxe vyhovuje víc. TS navíc umožňuje velmi elegantně doplnit typové informace i k existujícímu JS kódu, což nevím jestli jde nějak vyřešit anotacemi. V budoucnu může být opět zajímavou alternativou i Dart.

Co se podpory editorů a IDE týče, tak Microsoft osobně se stará o integraci do Visual Studia. Dále pak existuje plugin do Sublime Textu a nativně ho podporuje i WebStorm / PhpStorm od verze 6 (TS 0.8). Plánovaná verze 7 (dostupná zatím zdarma v rámci EAP) podporuje aktuální TS 0.9. O dalších osobně nevím.

Jan Tvrdík

> Proto vyvstává otázka, jak psát javascriptový kód stejným stylem, jako se píše C# kód ve Visual Studiu
Žádná taková otázka nevyvstává. JS s třídami a datovými typy není C# a nepíše se stejným stylem.

> Deklarace datových typů v komentáři mi přijde přinejmenším dost zvláštní.
To jste zřejmě nikdy nic nepsal v JS ani v PHP, protože v obou jazycích se jedná o zažitou praxi. Navíc Google Closure Compiler navíc dokáže (zatím) informaci o datových typech použít mnohem efektivněji, než TypeScript Compiler.

maryo

Kombinace Google Closure Compileru a CoffeeScriptu není bezproblémová. Closure compiler s CoffeeScriptem není moc kompatibilní. Jde to, ale musí se zkompilovanej CoffeeScript ještě parsovat a upravit. Este.js to řeší. Ale mám dojem, že se stejně pak musí pár věcem vyhnout.

Samuel Hapák
Anton

Ako sa vola ten plugin pre sublime? Nejake pluginy som skusal, ale ani jeden mi neprisiel pouzitelny.

blizz

cofeescript (eventualne LiveScript) a dalsie jazyky vychadzajucez Javascriptu nie su beztypove jazyky, JS typy ma prosim, prestudujte si co to je to staticka a dynamicka typova kontrola a aky je rozdiel medzi strong vs weak typing.

Ladislav Thon

Když už se oháníš slovy „prostudujte si“, tak lidi od teorie typů výrazy statické a dynamické typování nepoužívají. Používají… tadá!… výrazy typové a netypové jazyky. Z pohledu formální sémantiky jsou dynamicky typované jazyky speciálním případem staticky typovaných jazyků, které mají jenom jeden typ (určitá forma rekurzivního součtového typu). Takže tomu, čemu my říkáme dynamicky typované jazyky, oni říkají „untyped“ nebo „unityped“, což jsou výrazy, pod kterými bychom my chápali něco úplně jiného. Pokud jde o silné a slabé typování, tam je terminologie ještě zmatenější. Doporučuju se na tyhle debaty úplně vykašlat (s plným vědomím jejich atraktivnosti, sám jsem se řady z nich zúčastnil :-) ).

Stran článku: kde jsou benchmarky k tomu, že Dart je výrazně pomalejší než JavaScript? Já můžu sloužit jenom tímhle: https://www.dartlang.org/performance/ což ukazuje, že v některých situacích je idiomatický Dart zkompilovaný do JavaScriptu rychlejší než idiomatický JavaScript :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.