Embed Size (px)
Citation preview
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
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
Didaktik
Folien
Live-Coding
Übungsblatt im Nachgang
Page 5
ECMASCRIPT 5
Page 6
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
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
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
ECMASCRIPT 2015 ("ES6")
Page 13
ES 6
EcmaScript 2016 (ES 6)
Page 14
ES 5
8
Klassen
Page 15
// flug-suchen-vm.jsexport class FlugSuchenVM {
constructor() {this.vonFilter = "Graz";this.nachFilter = "Hamburg";
}
suchen() { […] }select() { […] }
}
var vm = new FlugSuchenVM();
Exportierte Elemente importieren
Page 16
// main.jsimport { FlugSuchenVM } from 'flug-suchen-vm';
var vm = new FlugSuchenVM();
vm.suchen();
Relative Pfadangaben oder über Mapping definiert
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
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
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
ÜBERBLICK ZU TYPESCRIPT
Page 27
TypeScript ES 6
TypeScript
Page 28
ES 5
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
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
Konfiguration via tsconfig.json
Page 34
{"compilerOptions": {
"module": "system","target": "es5","sourceMap": true
},"exclude": [
"node_modules"]
}
DEMO: TYPESCRIPT
Page 35
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
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
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
DEMO
Page 47
DEKORATOREN
Page 48
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
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
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
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
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("---");
}
}
