Slides for a talk on TypeScript presented at the first meeting of the .NET User Group Paderborn, Germany

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!