SlideShare une entreprise Scribd logo
1  sur  24
Télécharger pour lire hors ligne
TypeScript
Web Montag Kassel, 29 August 2016
Über den Vortragenden
 Jens Siebert
 Diplom-Informatiker
 Software-Architekt bei dSPACE (seit 2 Jahren)
 Vorher: SmartCards und Medizintechnik
Bild: privat (Jens Siebert, 2016)
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)
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)
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
Aktuelle Anwendungsgebiete von
JavaScript
Erkenntnis: Wartbarkeit und Erweiterbarkeit
von JavaScript-Code skalieren nicht!
Bilder: Wikipedia
Fehlerkosten in der Software-
Entwicklung
Bild: Wikipedia (http://developer.okta.com/assets/img/2015-05-08-software-engineering-design-principles-agile-cost-curve.png)
 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)
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)
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
TypeScript – Die Architektur
Bild: Wikipedia (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architecture.png)
TypeScript Beispiele - Klassen
class Greeter {
greet() : string {
return "Hello World!";
}
}
var Greeter = (function () {
function Greeter() {
}
Greeter.prototype.greet =
function () {
return "Hello World!";
};
return Greeter;
}());
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;
}());
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 = {}));
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;
});
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);
}
});
}
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;
}());
TypeScript Beispiele – React Support
interface Props {
foo: string;
}
class MyComponent extends React.Component<Props, {}> {
render() {
return <span>{this.props.foo}</span>
}
}
<MyComponent foo="bar" />
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…
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
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
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
Noch Fragen?
Vielen Dank!

Contenu connexe

Tendances

Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesGregor Biswanger
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreGregor Biswanger
 
MongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerMongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerGregor Biswanger
 
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Gregor Biswanger
 
Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Gregor Biswanger
 

Tendances (8)

JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
 
MongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerMongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen Hacker
 
C++11 und c++14
C++11 und c++14C++11 und c++14
C++11 und c++14
 
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
 
Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
 

Similaire à TypeScript

Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit RustJens Siebert
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit RustJens Siebert
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht SkriptsprachenA. LE
 
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Java Usergroup Berlin-Brandenburg
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeSOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeMario Rodler
 
Praesentation TYPO3Camp Berlin Speed mit Extbase
Praesentation TYPO3Camp Berlin Speed mit ExtbasePraesentation TYPO3Camp Berlin Speed mit Extbase
Praesentation TYPO3Camp Berlin Speed mit ExtbaseStefan Frömken
 
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?Robin Sedlaczek
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2Manfred Steyer
 
Production-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenProduction-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenAndré Goliath
 
OpenSocial und Apache Shindig
OpenSocial und Apache ShindigOpenSocial und Apache Shindig
OpenSocial und Apache ShindigMayflower GmbH
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungDigicomp Academy AG
 
2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.netDaniel Fisher
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
 

Similaire à TypeScript (20)

Typescript
TypescriptTypescript
Typescript
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
 
Web-Services mit Go
Web-Services mit GoWeb-Services mit Go
Web-Services mit Go
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeSOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
 
Praesentation TYPO3Camp Berlin Speed mit Extbase
Praesentation TYPO3Camp Berlin Speed mit ExtbasePraesentation TYPO3Camp Berlin Speed mit Extbase
Praesentation TYPO3Camp Berlin Speed mit Extbase
 
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
 
Production-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenProduction-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 Wochen
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
OpenSocial und Apache Shindig
OpenSocial und Apache ShindigOpenSocial und Apache Shindig
OpenSocial und Apache Shindig
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale Programmierung
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 

Plus de Jens Siebert

TinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete SystemeTinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete SystemeJens Siebert
 
Deep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.jsDeep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.jsJens Siebert
 
Chatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot FrameworkChatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot FrameworkJens Siebert
 
Integrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT ServicesIntegrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT ServicesJens Siebert
 
Embedded JavaScript
Embedded JavaScriptEmbedded JavaScript
Embedded JavaScriptJens Siebert
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT CoreJens Siebert
 
Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)Jens Siebert
 
Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Jens Siebert
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT CoreJens Siebert
 

Plus de Jens Siebert (15)

WebAssembly
WebAssemblyWebAssembly
WebAssembly
 
Embedded Rust
Embedded RustEmbedded Rust
Embedded Rust
 
Embedded Rust
Embedded RustEmbedded Rust
Embedded Rust
 
TinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete SystemeTinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete Systeme
 
Deep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.jsDeep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.js
 
Chatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot FrameworkChatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot Framework
 
Integrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT ServicesIntegrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT Services
 
GraphQL
GraphQLGraphQL
GraphQL
 
Embedded JavaScript
Embedded JavaScriptEmbedded JavaScript
Embedded JavaScript
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT Core
 
Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)
 
Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)
 
Electron
ElectronElectron
Electron
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT Core
 
Physical Web
Physical WebPhysical Web
Physical Web
 

TypeScript

  • 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 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. 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. Aktuelle Anwendungsgebiete von JavaScript Erkenntnis: Wartbarkeit und Erweiterbarkeit von JavaScript-Code skalieren nicht! Bilder: Wikipedia
  • 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.  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. 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. 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. TypeScript – Die Architektur Bild: Wikipedia (https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/images/architecture.png)
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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