V tomto díle bych rád probral co to TypeScript je, trochu z historie, která není nijak dlouhá, jaký má potenciál a co nám přinese jeho použití. Máte-li potuchy, o co se jedná, pak můžete tento díl hravě vynechat.
Proč zrovna TS
Dnes se nabízí spousta možností jak psát klientskou logiku. Za příklad můžu uvést čistý Javascript, CoffeeScript, LiveScript.
Tak proč zrovna TypeScript?
Čistý Javascript je poměrně dobrá volba, pokud jste masochisté, na druhou stranu máte-li sebevražedné sklony, pak Javascript může být právě to, co vás přinutí skočit z 11. podlaží nejbližšího panelového domu.
CoffeeScript mi nedokázal přinést to, na co jsem zvyklý z výhod aplikací v C#. Například typovost, dědičnost, syntaxe je z mého úhlu pohledu nepřehledná. Nejsem schopný moc rozpoznat, kde příkaz končí, jak se co přeloží atp.
Co se týče LiveScriptu. Jednou jsem byl na přednášce na ČVUT, která byla v rámci JsKonference. Dotyčný přednášející se snažil vysvětlit, kolik času programátor věnuje, aby daný kód přečetl a porozuměl mu. Po přednášce jsem si byl dostatečně jistý, že LiveScript je všechno, jen není přehledný. Pro programátora s velmi dobrou pamětí, který bude schopen se naučit nechutně velké množství operátorů, pak je to možná přehledný jazyk. Pro smrtelníky, ale nemohu doporučit.
TypeScript je na tom jinak. Obrovskou výhodou TypeScriptu je, že se jedná o nadstavbu nad JavaScriptem. Co to pro nás znamená v praxi? Málokdy se stává, že začínáme nějaký projekt od úplné nuly, a když už se tak stane, tak se můžeme dostat do situace, kdy máme již nějakou část té klientské logiky napsanou, ale chceme použít jinou technologii. Máme-li tuto logiku napsanou v JS, pak se automaticky jedná o validní typescriptový kód. IntelliSense nám většinu věcí dokáže velmi dobře odvodit.
TypeScript má samozřejmě více výhod než jen přenositelnost JS aplikací. Jak již název napovídá, TypeScript je jazyk silně typový. Kontrola typů se však provádí při kompilaci, nikoliv při běhu aplikace. I přes fakt, že kontrolu nemáme runtime, jsme schopni při kompilaci zjistit dostatek chyb, které by mohli vzniknout předáním špatného datového typu.
Vývojáři C# určitě rádi uslyší, že TypeScript nám přinesl klasickou dědičnost, co známe právě z C#, Interface, generičnost, moduly, union, lamda funkce a enum.
Zápis je tedy do značné míry podobný syntaxi C#.
Historie
Typescript tu není dlouho. Někdy v říjnu 2012 se objevila verze 0.8, která toho neuměla zas až tolik. Přibližně od verze 0.9.4 byla přidána generičnost. Ale i tak už jsme se dostali někam k verzi 1.4 a z posledních novinek nám přibyl třeba Union Types, Template Strings, Type Aliases, nebo třeba klíčové slovo let.
Na čem vyvíjet (IDE)
Ukázky budou především z Visual Studia 2013. Podporu pro Visual Studio je nutné doinstalovat. Na oficiálních stránkách http://www.typescriptlang.org/ je hned několik možností jak podporu doinstalovat. Zároveň bych doporučil si doinstalovat Web Essentials (http://vswebessentials.com/), který přidá užitečné funkce, o kterých se pobavíme v jednom z dalších dílů.
Ale to samozřejmě není jediné IDE, které pro vývoj TS lze použít.
(https://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx)
Kromě Visual Studia se nám nabízí také WebStorm / PhpStorm od JetBrains.
(http://www.jetbrains.com/webstorm/)
Další použitelný doplněk by měl být TypEcs. Jedná se o doplněk do Eclipse.
(http://typecsdev.com/)
Dokonce by měl existovat doplněk i Sublime Text, Emacs a Vim.
Proč tedy JavaScript nebrat
Zkoušeli jste někdy vytvořit třídu B, která by dědila z třídy A?
To může vypadat nějak takto:
function ClassA(firstName) {
//constructor
this.filename = firstName;
}
ClassA.prototype.SayFirstName = function () {
alert(this.filename);
}
function ClassB(firstname, lastname) {
this.filename = firstname;
this.lastname = lastname;
}
ClassB.prototype = Object.create(ClassA.prototype);
ClassB.prototype.SayLastName = function () {
alert(this.lastname);
};
var cb = new ClassB("Ladislav", "Šesták");
cb.SayFirstName();
Co vidím jako podstatný problém je, že není nikde řečeno, kde definice třidy končí. Můžete si ji dynamicky měnit, mít definici po různých souborech, které referencujete ve stránce v určitém pořadí a pak již nedohledáte co vlastně že to za tu třídu máte a co umí.
Nabízí se však otázka, zda tohle nevypadá lépe?
class ClassA {
constructor(private filename: string) {}
SayFirstName() {
alert(this.filename);
}
}
class ClassB extends ClassA {
constructor(private firstname: string, private lastname: string) {
super(firstname);
}
SayLastName() {
alert(this.lastname);
}
}
var cb = new ClassB("Ladislav", "Šesták");
cb.SayFirstName();
TypeScript vám umožní jasně definovat kde třída začíná a kde končí, co obsahuje a co dokáže.
Samozřejmě znalosti JS se nevyhnete. Je dobré vědět, co dělá prototype a podobné věci. Typescript je však velký pomocník, v případě, že se snažíte vaší aplikaci nějak členit a dát jí strukturu. V Javascriptu se toto dělá poměrně obtížně. Nehledě na problémy s IntelliSense, která není schopná říct, co přesně z funkce vyleze či do ní má lézt.
V dalším díle se již podíváme přímo na nějaké ukázky syntaxe jazyka, reference mezi soubory a další užitečné věci potřebné k úspěšnému startu.