borek bernard: typescript - příčetný jazyk pro web
TRANSCRIPT
@borekb#develcz
TypeScript
Příčetný jazyk pro web
@borekb#develcz
Fahrplan
▪ Proč TypeScript
▪ Hlavní vlastnosti
▪ Shrnutí, zhodnocení, chlebíčky
@borekb#develcz
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
@borekb#develcz
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é?
?
@borekb#develcz
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ů
… …
@borekb#develcz
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
@borekb#develcz
Reakce komunity
Vývoj standardů• Málem vznikl
ECMAScript 4• ES5, ES6
Nástroje nad JavaScriptem• JSLint, JSHint,• Google Closure
Compiler
Vznik technologií s kompilací do JS• GWT• Apache Flex
Transpilery do JS • CoffeeScript• Script#• TypeScript
@borekb#develcz
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#
@borekb#develcz
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
@borekb#develcz
Instalace
▪ NPM– npm install -g typescript
▪ Plugin do některých IDE– Visual Studio– JetBrains IDEs (WebStorm, PhpStorm, IDEA)
@borekb#develcz
Jak TypeScript vypadá
@borekb#develcz
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
@borekb#develcz
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
@borekb#develcz
Moduly
@borekb#develcz
Další syntaktické prvky
▪ Generika
▪ Lambda výrazy
▪ Chytré konstruktory
▪ Gettery / settery z ES5
▪ JSDoc (!)
@borekb#develcz
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
@borekb#develcz
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
@borekb#develcz
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ů
@borekb#develcz
Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to generate the most attractive code.
-- Douglas Crockford
„
@borekb#develcz
Díky && otázky?
@borekb#develcz
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