borek bernard: typescript - příčetný jazyk pro web

@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

Typový systém - příklad

http://jdem.cz/8rju5

@borekb#develcz

Třídy a rozhraní

http://jdem.cz/zqae7

@borekb#develcz

Moduly

@borekb#develcz

Moduly

http://jdem.cz/zqay7

@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