0
TypeScript
Příčetný jazyk pro web

#develcz

@borekb
Fahrplan
▪ Proč TypeScript

▪ Hlavní vlastnosti
▪ Shrnutí, zhodnocení, chlebíčky

#develcz

@borekb
Dosah HTML5 technologií:
▪ Běžné weby

▪ Chytřejší weby (GitHub, Khan Academy, …)
▪ Skoro-tlustí klienti (Gmail, Outlook.c...
Co nabízí HTML5 „v základu“
▪ Vykreslování HTML / CSS + DOM

▪ JavaScript jako jazyk
▪ VM / engine



?



▪ „F12 tools“...
Základní charakteristika
čistého JS
1. Zásadní výhoda:

je to jednoduchý jazyk

2. Zásadní nevýhoda:

je to jednoduchý jaz...
Typické problémy pro velké
aplikace
▪ Stejné koncepty si různé týmy implementují různě
– Třídy
– Dědičnost
– Jmenné prosto...
Reakce komunity
Vývoj standardů
• Málem vznikl
ECMAScript 4
• ES5, ES6

Vznik technologií
s kompilací do JS
• GWT
• Apache...
Co je TypeScript
▪ Jazyk a transpiler do JavaScriptu
– NENÍ to:
▪ Nová knihovna
▪ Aplikační framework
▪ Vývojové prostředí...
Co je na TypeScriptu zajímavé

▪ Nadmnožina JavaScriptu
– „All JavaScript code is TypeScript code“

▪ Chytrý typový systém...
Instalace
▪ NPM
– npm install -g typescript

▪ Plugin do některých IDE
– Visual Studio
– JetBrains IDEs (WebStorm, PhpStor...
Jak TypeScript vypadá

#develcz

@borekb
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

#...
Typový systém
Základní pravidla:

1. Psaní datových typů je volitelné
2. Když to jde, kompilátor si typ proměnné domyslí
(...
Typový systém - příklad

#develcz

http://jdem.cz/8rju5

@borekb
Třídy a rozhraní

#develcz

http://jdem.cz/zqae7

@borekb
Moduly

#develcz

@borekb
Moduly

#develcz

http://jdem.cz/zqay7

@borekb
Další syntaktické prvky
▪ Generika

▪ Lambda výrazy
▪ Chytré konstruktory
▪ Gettery / settery z ES5
▪ JSDoc (!)

#develcz
...
Současný stav
▪ Aktuálně verze 0.9.x

▪ Podpora ve Visual Studio 2012 a 2013
▪ Podpora v JetBrains IDE
(WebStorm, PhpStorm...
TypeScript je použitelný dnes
Projekty používající TypeScript:

▪ Webový frontend k TFS (~80kLoC)
▪ Různé projekty Adobe
▪...
Dobré vědět…
▪ TypeScript použitelný i pro server-side vývoj
– Node.js
– Deklarační soubory pro mnoho modulů
(express, req...
„

Microsoft's TypeScript may be the best of
the many JavaScript front ends. It seems to
generate the most attractive code...
Díky && otázky?

#develcz

@borekb
Zdroje
▪ Homepage:
– http://www.typescriptlang.org/

▪ Codeplex stránka (bugy, diskuze apod.):
– https://typescript.codepl...
Upcoming SlideShare
Loading in...5
×

Borek Bernard: TypeScript - příčetný jazyk pro web

373

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
373
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ravioly
  • Transcript of "Borek Bernard: TypeScript - příčetný jazyk pro web"

    1. 1. TypeScript Příčetný jazyk pro web #develcz @borekb
    2. 2. Fahrplan ▪ Proč TypeScript ▪ Hlavní vlastnosti ▪ Shrnutí, zhodnocení, chlebíčky #develcz @borekb
    3. 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. 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. 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. 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. 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. 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. 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. 10. Instalace ▪ NPM – npm install -g typescript ▪ Plugin do některých IDE – Visual Studio – JetBrains IDEs (WebStorm, PhpStorm, IDEA) #develcz @borekb
    11. 11. Jak TypeScript vypadá #develcz @borekb
    12. 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. 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. 14. Typový systém - příklad #develcz http://jdem.cz/8rju5 @borekb
    15. 15. Třídy a rozhraní #develcz http://jdem.cz/zqae7 @borekb
    16. 16. Moduly #develcz @borekb
    17. 17. Moduly #develcz http://jdem.cz/zqay7 @borekb
    18. 18. Další syntaktické prvky ▪ Generika ▪ Lambda výrazy ▪ Chytré konstruktory ▪ Gettery / settery z ES5 ▪ JSDoc (!) #develcz @borekb
    19. 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. 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. 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. 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. 23. Díky && otázky? #develcz @borekb
    24. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×