TypeScript

495 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

TypeScript

  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!

×