talk on typescript at .net user group paderborn (german)
TRANSCRIPT
TypeScriptEin Blick über den Tellerrand
DNUG Paderborn, 26. April 2016
Über den Vortragenden Jens Siebert Diplom-Informatiker Software-Architekt bei dSPACE (seit 2 Jahren) Vorher: SmartCards und Medizintechnik
Bild: privat (Jens Siebert, 2016)
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)
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)
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
Aktuelle Anwendungsgebiete von JavaScript
Erkenntnis: Wartbarkeit und Erweiterbarkeit von JavaScript-Code skalieren nicht!
Bilder: Wikipedia
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)
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)
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
TypeScript – Die Architektur
Bild: GitHub/Microsoft (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architecture.png)
TypeScript Beispiele - Klassen
class Greeter {
greet() : string {
return "Hello World!";
}
}
var Greeter = (function () {
function Greeter() {
}
Greeter.prototype.greet = function () {
return "Hello World!";
};
return Greeter;
}());
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;
}());
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 = {}));
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;
});
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);
}
});
}
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;
}());
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)
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;
}
}
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());
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;
}
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…
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
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
Noch Fragen?
Vielen Dank!