.NET Summit 2016 München: EcmaScript 2015+ with TypeScript

1. 1
Das „neue“ JavaScript:
EcmaScript 2015+ heute schon mit
TypeScript nutzen
Manfred Steyer
ManfredSteyer
Über mich …
 Manfred Steyer
 SOFTWAREarchitekt.at
 Trainer & Berater
 Angular am Client
 .NET am Server
Page  2

2. 2
Ziel
Überblick zur Nutzung von EcmaScript 6+
mit TypeScript anhand eines Beispiels
Überblick zu Angular 2
Page  3
Inhalt
 Rückblick zu EcmaScript 5
 EcmaScript 6
 TypeScript
 Ambiente Deklarationen
 Dekoratoren
 Angular 2
 Fallbeispiel mit TypeScript und Angular 2
Page  4

3. 3
Didaktik
Folien
Live-Coding
Übungsblatt im Nachgang
Page  5
ECMASCRIPT 5
Page  6

4. 4
EcmaScript 5 == Basis für X-Plattform
Funktionen
Page  8
function calcPrice(flug) {
if (flug.freiePlaetze > 100) return 200;
return 300;
}
var flug = […];
var preis = calcPrice(flug);

5. 5
Konstruktor-Funktionen
Page  9
function FlugSuchenVM() {
var that = this;
that.vonFilter = "Graz";
that.nachFilter = "Hamburg";
that.selectedFlug = null;
that.fluege = [];
that.message = "";
that.suchen = function() { … }
that.select = function() { … }
}
var vm = new FlugSuchenVM();
Namensräume
Page  10
function FlugSuchenVM() {
[…]
}
„Verschmutzt“ den globalen Namensraum.

6. 6
Immediately-Invoked Function
Expression (IIFE)
Page  11
(function () {
function FlugSuchenVM() { […] }
})();
Revealing Module Pattern
Page  12
var myNamespace = {};
(function (myNamespace) {
function FlugSuchenVM() { […] }
var modulInternalStuff = […];
myNamespace.FlugSuchenVM = FlugSuchenVM;
})(myNamespace);
[…]
var vm = new myNamespace.FlugSuchenVM();

7. 7
ECMASCRIPT 2015 ("ES6")
Page  13
ES 6
EcmaScript 2016 (ES 6)
Page  14
ES 5

8. 8
Klassen
Page  15
// flug-suchen-vm.js
export class FlugSuchenVM {
constructor() {
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
var vm = new FlugSuchenVM();
Exportierte Elemente importieren
Page  16
// main.js
import { FlugSuchenVM } from 'flug-suchen-vm';
var vm = new FlugSuchenVM();
vm.suchen();
Relative Pfadangaben oder über Mapping definiert

9. 9
Lambdas (Arrow-Functions)
Page  17
export class FlugSuchenVM {
fluege: Flug[];
search() {
var that = this;
fetch("http://www.angular.at/api/flug")
.then(function(response) {
return response.json();
})
.then(function(fluege) {
that.fluege = fluege;
});
}
}
Lambdas (Arrow-Functions)
Page  18
export class FlugSuchenVM {
fluege: Flug[];
search() {
var that = this;
fetch("http://www.angular.at/api/flug")
.then(function(response) {
return response.json();
})
.then(function(fluege) {
that.fluege = fluege;
});
}
}

10. 10
Lambdas (Arrow-Functions)
Page  19
export class FlugSuchenVM {
fluege: Flug[];
search() {
fetch("http://www.angular.at/api/flug")
.then((response) => {
return response.json();
})
.then((fluege) => {
this.fluege = fluege;
});
}
}
EcmaScript 6 heute schon nutzen
Cross-Kompilieren zu ES5 („Transpilation“)
Populärer Transpiler: Babel
Page  23

11. 11
Module laden via SystemJS
Page  25
<script src="path/system-polyfills.js"></script>
<script src="path/system.src.js"></script>
<script>
System.config({
packages: {
app: {
defaultExtension: 'js'
}
}
});
System.import('app/main').catch(function(err) {
console.error(err);
});
</script>
SystemJS beziehen
 NuGet
 npm:
 npm init -y
 npm install systemjs --save
Page  26

12. 12
ÜBERBLICK ZU
TYPESCRIPT
Page  27
TypeScriptES 6
TypeScript
Page  28
ES 5

13. 13
TypeScript
Page  30
export class FlugSuchenVM {
public vonFilter: string;
public nachFilter: string;
constructor() {
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
public suchen() { […] }
public select() { […] }
}
Datentypen
Page  31
number string boolean
Function Object any
Eigene
Kassen
Eigene
Interfaces

14. 14
TypeScript heute nutzen
TypeScript-Compiler kompiliert TypeScript
wahlweise nach ES6, ES5 oder ES3
Page  32
Werkzeuge
tsc: TypeScript-Compiler
typings: Packet-Manager für Typ-
Deklarationen
SystemJS o. ä. zum Laden der Dateien
Page  33

15. 15
Konfiguration via tsconfig.json
Page  34
{
"compilerOptions": {
"module": "system",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
DEMO:
TYPESCRIPT
Page  35

16. 16
AMBIENTE
DEKLARATIONEN
Page  41
Ambiente Deklarationen
 Typangaben für bereits bestehende JavaScript-
Variablen
 Notwendig, um Typen für bestehende JavaScript-
Frameworks zu definieren
 Beispiele
Globale Variable angular bei AngularJS
Globale Variable $ bei jQuery
Page  42

17. 17
Ambiente Deklarationen
Page  43
interface JQueryStatic {
get(url: string, callback: (data: string) => any);
}
declare var $: JQueryStatic;
$.get("http://mysite.org/divContent", function (data: string) {
…
} );
Ambiente Deklarationen
Zahlreiche Typings-Dateien (mit ambienten
Deklarationen) online
Page  44

18. 18
Package-Manager 'typings'
npm init
npm install jquery
[npm install typings --global]
[typings init]
typings install jquery --ambient --save
Page  45
tsconfig.json
Page  46
{
"compilerOptions": {
"module": "system",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

19. 19
DEMO
Page  47
DEKORATOREN
Page  48

20. 20
Was sind Dekoratoren?
 Möglichkeit zum Annotieren von Quellcode-Elementen
 Können Metadaten festlegen
 Können dekorierte Elemente auch verändern/
austauschen
 Vorschlag für EcmaScript
 Werden bereits von Frameworks genutzt und von
Transpilern implementiert (de facto "Standard")
Page  49
Beispiel
Page  50
@DocuWithLabel("Repräsentiert einen Flug")
class Flug {
constructor(@Docu abflugort: string) {
this.abflugort = abflugort;
}
@Docu
abflugort: string;
@Docu
info(): string {
return this.abflugort + " - " + this.zielort;
}
}

21. 21
In tsconfig.json aktivieren
Page  51
{
"compilerOptions": {
"module": "system",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules"
]
}
Was kann dekoriert werden?
Klassen
Member
Argumente (vorerst nur TypeScript)
Page  52

22. 22
Dekoratoren sind Funktionen
Page  53
@Docu
class Flug { […] }
class Flug { […] }
Flug= Docu(Flug) || Flug;
Dekoratoren sind Funktionen
Page  54
@DocuWithLabel("Repräsentiert einen Flug")
class Flug { […] }
class Flug { […] }
Flug = DocuWithLabel("Repräsentiert einen Flug")(Flug) || Flug;

23. 23
Dekorator für Klassen
Page  55
function Docu(target) {
console.debug(target);
}
Dekorator für Member
Page  56
function Docu(target, key, descriptor) {
console.debug(target);
console.debug(key);
console.debug(descriptor);
console.debug("---");
}

24. 24
Dekorator für Argumente (TypeScript)
Page  57
function Docu(target, key, descriptor) {
console.debug(target);
console.debug(key);
console.debug(descriptor);
console.debug("---");
}
Argumentposition (0, 1, … n)
Factory für Dekorator
Page  58
function DocuWithLabel(label) {
return function(target, key?, descriptor?) {
console.debug(label);
console.debug(target);
console.debug(key);
console.debug(descriptor);
console.debug("---");
}
}

25. 25
DEMO
Page  59
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact