TypeScript
Ein Blick über den Tellerrand
DNUG Paderborn, 26. April 2016
Über den Vortragenden
 Jens Siebert
 Diplom-Informatiker
 Software-Architekt bei dSPACE (seit 2 Jahren)
 Vorher: Smart...
Bevor wir uns TypeScript widmen…
Bild: Wikipedia (https://en.wikipedia.org/wiki/File:TeamTimeCar.com-BTTF_DeLorean_Time_Ma...
JavaScript – Ein Blick in die Geschichte
 Entwickelt bei Netscape durch Brendan Eich
 Entwicklungsdauer bis zur ersten V...
JavaScript - Features
 Interpretiert
 Funktional
 Dynamisch typisiert
var i = 5;
i = „Hallo Welt“;
 Objektorientiert (...
Aktuelle Anwendungsgebiete von
JavaScript
Erkenntnis: Wartbarkeit und Erweiterbarkeit
von JavaScript-Code skalieren nicht!...
Fehlerkosten in der Software-
Entwicklung
Bild: OKTA, INC. (http://developer.okta.com/assets/img/2015-05-08-software-engin...
Auftritt TypeScript
 Entwickelt bei Microsoft durch Anders Hejlsberg
 Beeinflusst durch JavaScript, Java, C#
 TypeScrip...
TypeScript – Was ist das eigentlich?
 Superset von JavaScript/ECMAScript
 Features:
 Hochgradige Kompatibilität zu ECMA...
TypeScript – Die Architektur
Bild: GitHub/Microsoft (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/ar...
TypeScript Beispiele - Klassen
class Greeter {
greet() : string {
return "Hello World!";
}
}
var Greeter = (function () {
...
TypeScript Beispiele - Interfaces
interface IGreeter {
greet() : string;
}
class Greeter implements IGreeter {
greet() : s...
TypeScript Beispiele - Namespaces
namespace Greetings {
export interface IGreeter {
greet() : string;
}
export class Greet...
TypeScript Beispiele - Module
interface IGreeter {
greet() : string;
}
class Greeter implements IGreeter {
greet() : strin...
TypeScript Beispiele – async/await
async function main() {
await ping();
}
async function ping() {
for (var i = 0; i < 10;...
TypeScript Beispiele – Singleton Pattern
class Greeter {
private static greeter : Greeter = null;
public static GetInstanc...
SOLID Prinzipien
 Eingeführt durch Robert C. Martin (Uncle Bob)
 Regeln für die Entwicklung von Software-Systemen, die e...
Liskov Substitution Principle [1]
interface IPersistenceService {
save(entity : any) : number
}
class CookiePersistenceSer...
Liskov Substitution Principle [2]
class Favorites {
private _persistenceSerice : IPersistenceService;
constructor(persiste...
Interface Segregation Principle
interface VehicleInterface {
getSpeed() : number;
getVehicleType() : number
isTaxPayed() :...
Ausblick auf TypeScript 2.0
 Non-nullable types
 Readonly properties
 private and protected constructors
 abstract pro...
Zusammenfassung
 TypeScript bietet…
 … strenge Typisierung
 … Mechanismen zur Strukturierung großer Software-Systeme
 ...
Literatur-Tipps
Bilder:
Packt Publishing (https://www.packtpub.com/sites/default/files/5548OS_Learning%20TypeScript_.jpg)
...
Noch Fragen?
Vielen Dank!
Nächste SlideShare
Wird geladen in …5
×

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

255 Aufrufe

Veröffentlicht am

The slides of my talk at the first meeting of the .NET User Group Paderborn, Germany

Veröffentlicht in: Software
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
255
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. TypeScript Ein Blick über den Tellerrand DNUG Paderborn, 26. April 2016
  2. 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. 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. 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. 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. 6. Aktuelle Anwendungsgebiete von JavaScript Erkenntnis: Wartbarkeit und Erweiterbarkeit von JavaScript-Code skalieren nicht! Bilder: Wikipedia
  7. 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. 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. 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. 10. TypeScript – Die Architektur Bild: GitHub/Microsoft (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architecture.png)
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Noch Fragen?
  25. 25. Vielen Dank!

×