Talk on TypeScript at .NET User Group Paderborn (German)

25
TypeScript Ein Blick über den Tellerrand DNUG Paderborn, 26. April 2016

Transcript of Talk on TypeScript at .NET User Group Paderborn (German)

Page 1: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScriptEin Blick über den Tellerrand

DNUG Paderborn, 26. April 2016

Page 2: Talk on TypeScript at .NET User Group Paderborn (German)

Über den Vortragenden Jens Siebert Diplom-Informatiker Software-Architekt bei dSPACE (seit 2 Jahren) Vorher: SmartCards und Medizintechnik

Bild: privat (Jens Siebert, 2016)

Page 3: Talk on TypeScript at .NET User Group Paderborn (German)

Bevor wir uns TypeScript widmen…

Bild: Wikipedia (https://en.wikipedia.org/wiki/File:TeamTimeCar.com-BTTF_DeLorean_Time_Machine-OtoGodfrey.com-JMortonPhoto.com-07.jpg)

Page 4: Talk on TypeScript at .NET User Group Paderborn (German)

JavaScript – Ein Blick in die Geschichte Entwickelt bei Netscape durch Brendan Eich Entwicklungsdauer bis zur ersten Version: 10 Tage Beeinflusst durch Scheme, Perl, Self, Java, C, Python, etc. JavaScript 1.0 im März 1996 Standardisierung durch ECMA in 1997 (ECMAScript) Aktueller Standard: ECMAScript 2015 (ES2015/ES6) Typische Anwendungsgebiete (initial):

DOM-Manipulation Form-Validierung

Bild: Wikipedia (https://en.wikipedia.org/wiki/File:Brendan_Eich_Mozilla_Foundation_official_photo.jpg)

Page 5: Talk on TypeScript at .NET User Group Paderborn (German)

JavaScript - Features Interpretiert Funktional Dynamisch typisiert

var i = 5;

i = „Hallo Welt“;

Objektorientiert (Prototyp-basierte Objektorientierung)var hund = Object.create(tier);

hund.bellen = function() {

console.log("Wuff");

}

delete hund.bellen;

hund.bellen(); // Kabumm

Keine (nativen) Mechanismen zur Strukturierung großer Software-Systeme

Page 6: Talk on TypeScript at .NET User Group Paderborn (German)

Aktuelle Anwendungsgebiete von JavaScript

Erkenntnis: Wartbarkeit und Erweiterbarkeit von JavaScript-Code skalieren nicht!

Bilder: Wikipedia

Page 7: Talk on TypeScript at .NET User Group Paderborn (German)

Fehlerkosten in der Software-Entwicklung

Bild: OKTA, INC. (http://developer.okta.com/assets/img/2015-05-08-software-engineering-design-principles-agile-cost-curve.png)

Page 8: Talk on TypeScript at .NET User Group Paderborn (German)

Auftritt TypeScript Entwickelt bei Microsoft durch Anders Hejlsberg Beeinflusst durch JavaScript, Java, C# TypeScript 0.8 im Oktober 2012 Aktuelle Version: TypeScript 1.8

Bild: Wikipedia (https://en.wikipedia.org/wiki/File:Anders_Hejlsberg.jpg)

Page 9: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript – Was ist das eigentlich? Superset von JavaScript/ECMAScript Features:

Hochgradige Kompatibilität zu ECMAScript (ES3, ES5, ES2015) Übersetzung in „lesbaren“ JavaScript-Code Strenge Typisierung (optional) Mechanismen zur Strukturierung großer Software-Systeme

u.a. Klassen, Interfaces, Generics, Module, … Minimale zusätzliche Laufzeit-Kosten Enge Anlehnung an aktuelle und zukünftige ECMAScript-Standards Services zur vereinfachten Integration in Entwicklungswerkzeuge Cross Platform und Open Source

Page 10: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript – Die Architektur

Bild: GitHub/Microsoft (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architecture.png)

Page 11: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript Beispiele - Klassen

class Greeter {

greet() : string {

return "Hello World!";

}

}

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

return "Hello World!";

};

return Greeter;

}());

Page 12: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript Beispiele - Interfaces

interface IGreeter {

greet() : string;

}

class Greeter implements IGreeter {

greet() : string {

return "Hello World!";

}

}

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

return "Hello World!";

};

return Greeter;

}());

Page 13: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript Beispiele - Namespaces

namespace Greetings {

export interface IGreeter {

greet() : string;

}

export class Greeter implements IGreeter {

greet() : string {

return "Hello World!";

}

}

}

var Greetings;

(function (Greetings) {

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

return "Hello World!";

};

return Greeter;

}());

Greetings.Greeter = Greeter;

})(Greetings || (Greetings = {}));

Page 14: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript Beispiele - Module

interface IGreeter {

greet() : string;

}

class Greeter implements IGreeter {

greet() : string {

return "Hello World!";

}

}

export { IGreeter, Greeter }

// AMD Module syntax

define(["require", "exports"], function (require, exports) {

"use strict";

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

return "Hello World!";

};

return Greeter;

}());

exports.Greeter = Greeter;

});

Page 15: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript Beispiele – async/await

async function main() {

await ping();

}

async function ping() {

for (var i = 0; i < 10; i++) {

await delay(300);

console.log(“ping”);

}

}

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {

return new (P || (P = Promise))(function (resolve, reject) {

function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }

function rejected(value) { try { step(generator.throw(value)); } catch (e) { reject(e); } }

function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }

step((generator = generator.apply(thisArg, _arguments)).next());

});

};

function main() {

return __awaiter(this, void 0, void 0, function* () {

yield ping();

});

}

function ping() {

return __awaiter(this, void 0, void 0, function* () {

for (var i = 0; i < 10; i++) {

yield delay(300);

console.log(ping);

}

});

}

Page 16: Talk on TypeScript at .NET User Group Paderborn (German)

TypeScript Beispiele – Singleton Patternclass Greeter {

private static greeter : Greeter = null;

public static GetInstance() : Greeter {

if (this.greeter == null) {

this.greeter = new Greeter();

}

return this.greeter;

}

greet() : string {

return "Hello World!";

}

}

var Greeter = (function () {

function Greeter() {

}

Greeter.GetInstance = function () {

if (this.greeter == null) {

this.greeter = new Greeter();

}

return this.greeter;

};

Greeter.prototype.greet = function () {

return "Hello World!";

};

Greeter.greeter = null;

return Greeter;

}());

Page 17: Talk on TypeScript at .NET User Group Paderborn (German)

SOLID Prinzipien Eingeführt durch Robert C. Martin (Uncle Bob) Regeln für die Entwicklung von Software-Systemen, die einfach gewartet

und erweitert werden können.

S – Single Responsibility Principle (SRP) a class should have only a single responsibility

O – Open-Closed Principle (OCP) software entities … should be open for extension, but closed for modification

L – Liskov Substitution Principle (LSP) objects in a program should be replaceable with instances of their subtypes without

altering the correctness of that program I – Interface Segregation Principle (ISP)

many client-specific interfaces are better than one general-purpose interface D – Dependency Inversion Principle (DIP)

one should “Depend upon Abstractions. Do not depend upon concretions”Bild: Wikipedia (https://en.wikipedia.org/wiki/File:Robert_Cecil_Martin.png)

Page 18: Talk on TypeScript at .NET User Group Paderborn (German)

Liskov Substitution Principle [1]interface IPersistenceService {

save(entity : any) : number

}

class CookiePersistenceService implements IPersistenceService {

save(entity : any) : number {

var id = …;

[…]

return id;

}

}

class LocalPersistenceService implements IPersistenceService {

save(entity : any) : number {

var id = …;

[…]

return id;

}

}

Page 19: Talk on TypeScript at .NET User Group Paderborn (German)

Liskov Substitution Principle [2]class Favorites {

private _persistenceSerice : IPersistenceService;

constructor(persistenceService : IPersistenceService) {this._persistenceSerice = persistenceService;

}

public setPersistenceService(persistenceService : IPersistenceService) { this._persistenceService = persistenceService;

}

public saveFavorite(favorite : any) {this._persistenceSerice.save(favorite);

}

}

var cookieFav = new Favorites(new CookiePersistenceService());var localFav = new Favorites(new LocalPersistenceService());cookieFav.setPersistenceService(new LocalPersistenceService());

Page 20: Talk on TypeScript at .NET User Group Paderborn (German)

Interface Segregation Principleinterface VehicleInterface {

getSpeed() : number;

getVehicleType() : number

isTaxPayed() : boolean;

isLightOn() : boolean;

isLightOff() : boolean;

startEngine() : void;

accelerate : number;

stopEngine() : void;

}

interface VehicleInterface {

getSpeed() : number;

getVehicleType() : number

isTaxPayed() : boolean;

}

interface LightInterface {

isLightOn() : boolean;

isLightOff() : boolean;

}

interface EngineInterface {

startEngine() : void;

accelerate : number;

stopEngine() : void;

}

Page 21: Talk on TypeScript at .NET User Group Paderborn (German)

Ausblick auf TypeScript 2.0 Non-nullable types Readonly properties private and protected constructors abstract properties async/await support for ES5/ES3 und noch vieles mehr…

Page 22: Talk on TypeScript at .NET User Group Paderborn (German)

Zusammenfassung TypeScript bietet…

… strenge Typisierung … Mechanismen zur Strukturierung großer Software-Systeme … Kompatibilität zu bestehenden und zukünftigen ECMAScript-Standards

TypeScript ermöglicht… … Prüfung der Software während der Implementierung … vereinfachte Integration in Entwicklungswerkzeuge … Anwendung bekannter und bewährter Prinzipien für die Entwicklung

großer Software-Systeme

Page 23: Talk on TypeScript at .NET User Group Paderborn (German)

Literatur-Tipps

Bilder: Packt Publishing (https://www.packtpub.com/sites/default/files/5548OS_Learning%20TypeScript_.jpg)Rheinwerk Verlag (https://s3-eu-west-1.amazonaws.com/cover2.galileo-press.de/print/9783836223799_800.png)

TypeScript Documentation: http://www.typescriptlang.org/docs/tutorial.htmlTypeScript Playground: http://www.typescriptlang.org/play/index.html

Page 24: Talk on TypeScript at .NET User Group Paderborn (German)

Noch Fragen?

Page 25: Talk on TypeScript at .NET User Group Paderborn (German)

Vielen Dank!