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
×

Talk on TypeScript at Web Montag Kassel (German)

65 Aufrufe

Veröffentlicht am

The slides of my talk given at Web Montag Kassel

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

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

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

Keine Notizen für die Folie

Talk on TypeScript at Web Montag Kassel (German)

  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!

×