typescript aneb jak si ušetřit nervy (úvod) – 1. díl

1. díl - typescript aneb jak si ušetřit nervy (úvod) – 1. díl

Ladislav Šesták       22. 3. 2015       JavaScript       4579 zobrazení

Psát klientskou logiku v javascriptu je k zbláznění. Proč si tedy neulehčit život? Typescript nám v tomto ohledu dokáže velmi pomoci. Přinesl nám tak postrádanou silnou typovost, dědičnost co známe z C#, lamda funkce a spoustu dalších užitečných věcí. Tento díl je však pro úplné začátečníky.

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.

 

hodnocení článku

0       Hodnotit mohou jen registrované uživatelé.

 

Všechny díly tohoto seriálu

1. typescript aneb jak si ušetřit nervy (úvod) – 1. díl 22. 3. 2015

 

Mohlo by vás také zajímat

Začínáme s ASP.NET - díl 6.: Pokročilá práce s daty v ASP.NET 2.0

V tomto díle si ukážeme, jak přidávat, upravovat a mazat záznamy v databázové tabulce. Představíme si také použití komponent DropDownList, RadioButtonList a detailně se budeme věnovat komponentě FormView a jejím důležitým vlastnostem. Jako ukázkový příklad napíšeme aplikaci pro evidenci hudebních CD.

jQuery a ASP.NET - díl 1.: Začínáme s jQuery

jQuery je dnes de facto standardem a ať už se nám to líbí nebo ne, nachází použití ve většině moderních webových aplikací. V tomto dílu si popíšeme základy práce s jQuery pro ty, kteří jej ještě nikdy neviděli.

Jak se vypořádat s LESS soubory ve Visual Studiu 2015

 

 

Nový příspěvek

 

Příspěvky zaslané pod tento článek se neobjeví hned, ale až po schválení administrátorem.

                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

Příspěvky zaslané pod tento článek se neobjeví hned, ale až po schválení administrátorem.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback