Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
TypeScript
Web Montag Kassel, 29 August 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
 Nicht typisiert
var i = 5;
i = „Hallo Welt“;
 Objektorie...
Aktuelle Anwendungsgebiete von
JavaScript
Erkenntnis: Wartbarkeit und Erweiterbarkeit
von JavaScript-Code skalieren nicht!...
Fehlerkosten in der Software-
Entwicklung
Bild: Wikipedia (http://developer.okta.com/assets/img/2015-05-08-software-engine...
 Große Software-Systeme sind ohne Automatisierung schwer zu verwalten
 Aussagen über implementierte und genutzte Schnitt...
Auftritt TypeScript
 Entwickelt bei Microsoft durch Anders Hejlsberg
 Beeinflusst durch JavaScript, Java, C#
 TypeScrip...
TypeScript – Was ist das eigentlich?
 Superset von JavaScript/ECMAScript
 Features:
 Kompatibilität zu ECMAScript (ES3,...
TypeScript – Die Architektur
Bild: Wikipedia (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architect...
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...
TypeScript Beispiele – React Support
interface Props {
foo: string;
}
class MyComponent extends React.Component<Props, {}>...
Ausblick auf TypeScript 2.0
 Non-nullable types
 Readonly properties
 private and protected constructors
 abstract pro...
Alternative zu TypeScript - Flow
/* @flow */
function add(num1: number, num2: number): number {
return num1 + num2;
}
var ...
Zusammenfassung
 TypeScript bietet…
 … strenge Typisierung
 … Mechanismen zur Strukturierung großer Software-Systeme
 ...
Literatur & Links
Bild:
Packt Publishing (https://www.packtpub.com/sites/default/files/5548OS_Learning%20TypeScript_.jpg)
...
Noch Fragen?
Vielen Dank!
Nächste SlideShare
Wird geladen in …5
×

TypeScript

284 Aufrufe

Veröffentlicht am

Slides for a talk on TypeScript presented at Web Montag Kassel, Germany

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

  • Gehören Sie zu den Ersten, denen das gefällt!

TypeScript

  1. 1. TypeScript Web Montag Kassel, 29 August 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 2016 (ES2016)  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  Nicht 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: Wikipedia (http://developer.okta.com/assets/img/2015-05-08-software-engineering-design-principles-agile-cost-curve.png)
  8. 8.  Große Software-Systeme sind ohne Automatisierung schwer zu verwalten  Aussagen über implementierte und genutzte Schnittstellen sind praktisch kaum zu treffen  Statische Codeanalyse  Typinformationen Fehlerkosten in der Software- Entwicklung Bild: Wikipedia (http://developer.okta.com/assets/img/2015-05-08-software-engineering-design-principles-agile-cost-curve.png)
  9. 9. Auftritt TypeScript  Entwickelt bei Microsoft durch Anders Hejlsberg  Beeinflusst durch JavaScript, Java, C#  TypeScript 0.8 im Oktober 2012  Aktuelle Version: TypeScript 1.8 (2.0 Beta) Bild: Wikipedia (https://en.wikipedia.org/wiki/File:Anders_Hejlsberg.jpg)
  10. 10. TypeScript – Was ist das eigentlich?  Superset von JavaScript/ECMAScript  Features:  Kompatibilität zu ECMAScript (ES3, ES5, ES2015, ES2016)  Strenge Typisierung (optional)  Mechanismen zur Strukturierung großer Software-Systeme  u.a. Klassen, Interfaces, Generics, Module, …  Übersetzung in „lesbaren“ JavaScript-Code  Minimale zusätzliche Laufzeit-Kosten  Enge Anlehnung an aktuelle und zukünftige ECMAScript-Standards  Services zur vereinfachten Integration in Entwicklungswerkzeuge  Native Unterstützung von React (JSX-Syntax)  Cross Platform und Open Source
  11. 11. TypeScript – Die Architektur Bild: Wikipedia (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architecture.png)
  12. 12. TypeScript Beispiele - Klassen class Greeter { greet() : string { return "Hello World!"; } } var Greeter = (function () { function Greeter() { } Greeter.prototype.greet = function () { return "Hello World!"; }; return Greeter; }());
  13. 13. 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; }());
  14. 14. 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 = {}));
  15. 15. 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; });
  16. 16. 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); } }); }
  17. 17. 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; }());
  18. 18. TypeScript Beispiele – React Support interface Props { foo: string; } class MyComponent extends React.Component<Props, {}> { render() { return <span>{this.props.foo}</span> } } <MyComponent foo="bar" />
  19. 19. Ausblick auf TypeScript 2.0  Non-nullable types  Readonly properties  private and protected constructors  abstract properties  async/await support for ES5/ES3  Interface definition file (.d.ts) installation via npm  und noch vieles mehr…
  20. 20. Alternative zu TypeScript - Flow /* @flow */ function add(num1: number, num2: number): number { return num1 + num2; } var x: number = add(3, '0'); > flow check file.js:5 5: var x: number = add(3, '0'); ^^^^^^^^^^^ function call 5: var x: number = add(3, '0'); ^^^ string. This type is incompatible with 2: function add(num1: number, num2: number): number { ^^^^^^ number Found 1 error
  21. 21. Zusammenfassung  TypeScript bietet…  … strenge Typisierung  … Mechanismen zur Strukturierung großer Software-Systeme  … Kompatibilität zu bestehenden 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
  22. 22. Literatur & Links Bild: Packt Publishing (https://www.packtpub.com/sites/default/files/5548OS_Learning%20TypeScript_.jpg) TypeScript: http://www.typescriptlang.org TypeScript Documentation: http://www.typescriptlang.org/docs/tutorial.html TypeScript Playground: http://www.typescriptlang.org/play/index.html Flow: https://flowtype.org
  23. 23. Noch Fragen?
  24. 24. Vielen Dank!

×