Der Vortrag behandelt TypeScript als ein Superset von JavaScript, das 2012 von Microsoft entwickelt wurde und eine strenge Typisierung sowie Mechanismen zur Strukturierung großer Software-Systeme bietet. TypeScript verbessert die Wartbarkeit und Erweiterbarkeit von Code und ist kompatibel mit bestehenden und zukünftigen ECMAScript-Standards. Es wird auf verschiedene Anwendungsbeispiele und Prinzipien der Softwareentwicklung eingegangen, einschließlich der SOLID-Prinzipien.

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

2. Über den Vortragenden
 Jens Siebert
 Diplom-Informatiker
 Software-Architekt bei dSPACE (seit 2 Jahren)
 Vorher: SmartCards und Medizintechnik
Bild: privat (Jens Siebert, 2016)

3. 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)

4. 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)

5. 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

6. Aktuelle Anwendungsgebiete von
JavaScript
Erkenntnis: Wartbarkeit und Erweiterbarkeit
von JavaScript-Code skalieren nicht!
Bilder: Wikipedia

7. 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)

8. 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)

9. 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

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

11. TypeScript Beispiele - Klassen
class Greeter {
greet() : string {
return "Hello World!";
}
}
var Greeter = (function () {
function Greeter() {
}
Greeter.prototype.greet =
function () {
return "Hello World!";
};
return Greeter;
}());

12. 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;
}());

13. 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 = {}));

14. 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;
});

15. 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);
}
});
}

16. TypeScript Beispiele – Singleton Pattern
class 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;
}());

17. 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)

18. 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;
}
}

19. 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());

20. Interface Segregation Principle
interface 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;
}

21. 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…

22. 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

23. 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.html
TypeScript Playground: http://www.typescriptlang.org/play/index.html

24. Noch Fragen?

25. Vielen Dank!