1. TypeScript
Příčetný jazyk pro web
#develcz
@borekb

2. Fahrplan
▪ Proč TypeScript
▪ Hlavní vlastnosti
▪ Shrnutí, zhodnocení, chlebíčky
#develcz
@borekb

3. Dosah HTML5 technologií:
▪ Běžné weby
▪ Chytřejší weby (GitHub, Khan Academy, …)
▪ Skoro-tlustí klienti (Gmail, Outlook.com, …)
▪ Mobilní / tabletové aplikace (PhoneGap, Metro)
▪ Hry
▪ Desktopové aplikace (Brackets, …)
▪ Celé systémy (webOS, Firefox OS)
▪ Server-side (node.js, …)
 Potřeba vytvářet opravdu komplexní věci
#develcz
@borekb

4. Co nabízí HTML5 „v základu“
▪ Vykreslování HTML / CSS + DOM
▪ JavaScript jako jazyk
▪ VM / engine

?

▪ „F12 tools“ v prohlížečích

– Firebug, Chrome Dev Tools, IE dev tools
Klíčová otázka: je to dostatečné?
#develcz
@borekb

5. Základní charakteristika
čistého JS
1. Zásadní výhoda:
je to jednoduchý jazyk
2. Zásadní nevýhoda:
je to jednoduchý jazyk
Co je na JS dobré
Co je potenciálně problematické
Dynamické typování
Dynamické typování
Žádné třídy, rozhraní apod.
Žádné třídy, rozhraní apod.
Není klasická třídní dědičnost
Není klasická třídní dědičnost
Nevynucuje strukturu zdrojáků
Nevynucuje strukturu zdrojáků
…
…
#develcz
@borekb

6. Typické problémy pro velké
aplikace
▪ Stejné koncepty si různé týmy implementují různě
– Třídy
– Dědičnost
– Jmenné prostory apod.
▪ Problematická statická analýza kódu
▪ Relativně obtížná toolovatelnost
#develcz
@borekb

7. Reakce komunity
Vývoj standardů
• Málem vznikl
ECMAScript 4
• ES5, ES6
Vznik technologií
s kompilací do JS
• GWT
• Apache Flex
#develcz
Nástroje nad
JavaScriptem
• JSLint, JSHint,
• Google Closure
Compiler
Transpilery do JS
• CoffeeScript
• Script#
• TypeScript
@borekb

8. Co je TypeScript
▪ Jazyk a transpiler do JavaScriptu
– NENÍ to:
▪ Nová knihovna
▪ Aplikační framework
▪ Vývojové prostředí
– Opravdu jen jazyk
▪ Vzniklý „jen tak mimochodem“ v Microsoftu
– potřebovali vyplnit čas před další prací na C#
#develcz
@borekb

9. Co je na TypeScriptu zajímavé
▪ Nadmnožina JavaScriptu
– „All JavaScript code is TypeScript code“
▪ Chytrý typový systém (TypeScript)
– Volitelnost typů, typová inference, strukturální typovost
apod.
▪ Podpora v nástrojích
– Visual Studio, WebStorm, Sublime Text, …
▪ Snadná integrace s existujícím ekosystémem
– *.d.ts pro jQuery, Node.js, AngularJS, Ember, …
▪ Vlastnosti ES6 dostupné už dnes
#develcz
@borekb

10. Instalace
▪ NPM
– npm install -g typescript
▪ Plugin do některých IDE
– Visual Studio
– JetBrains IDEs (WebStorm, PhpStorm, IDEA)
#develcz
@borekb

11. Jak TypeScript vypadá
#develcz
@borekb

12. Tři hlavní rozšíření JS
syntaxe
1. Datové typy, typový systém
– včetně generik
2. Třídy, rozhraní, dědičnost
3. Moduly
#develcz
@borekb

13. Typový systém
Základní pravidla:
1. Psaní datových typů je volitelné
2. Když to jde, kompilátor si typ proměnné domyslí
(„type inference“, a to oběma směry)
3. Strukturální typový systém
– důležitý je „tvar objektů“, ne jejich název nebo konkrétní
realizace
#develcz
@borekb

14. Typový systém - příklad
#develcz
http://jdem.cz/8rju5
@borekb

15. Třídy a rozhraní
#develcz
http://jdem.cz/zqae7
@borekb

16. Moduly
#develcz
@borekb

17. Moduly
#develcz
http://jdem.cz/zqay7
@borekb

18. Další syntaktické prvky
▪ Generika
▪ Lambda výrazy
▪ Chytré konstruktory
▪ Gettery / settery z ES5
▪ JSDoc (!)
#develcz
@borekb

19. Současný stav
▪ Aktuálně verze 0.9.x
▪ Podpora ve Visual Studio 2012 a 2013
▪ Podpora v JetBrains IDE
(WebStorm, PhpStorm, …)
▪ Čeká se na v1.0
– Dodělání specifikace, zaručení 100% správného chování
▪ Post-1.0
– Async/await
– Protected přístup
– ES6 output
#develcz
@borekb

20. TypeScript je použitelný dnes
Projekty používající TypeScript:
▪ Webový frontend k TFS (~80kLoC)
▪ Různé projekty Adobe
▪ TouchDevelop
▪ Socl.com
▪ PolyCraft (3D hra)
▪ TypeScript compiler
#develcz
@borekb

21. Dobré vědět…
▪ TypeScript použitelný i pro server-side vývoj
– Node.js
– Deklarační soubory pro mnoho modulů
(express, request, …)
– Podporuje generování CommonJS modulů
▪ Repozitáře d.ts souborů:
– https://github.com/borisyankov/DefinitelyTyped
– https://github.com/soywiz/typescript-node-definitions
▪ Specifikace je dobře čitelná a plná příkladů
#develcz
@borekb

22. „
Microsoft's TypeScript may be the best of
the many JavaScript front ends. It seems to
generate the most attractive code.
-- Douglas Crockford
#develcz
@borekb

23. Díky && otázky?
#develcz
@borekb

24. Zdroje
▪ Homepage:
– http://www.typescriptlang.org/
▪ Codeplex stránka (bugy, diskuze apod.):
– https://typescript.codeplex.com/
▪ Definiční soubory pro skoro cokoliv:
– https://github.com/borisyankov/DefinitelyTyped
#develcz
@borekb