TypeScript wurde 2012 von Microsoft vorgestellt. Obwohl TypeScript moderne OO-Sprachelemente wie Klassen, Interfaces, Vererbung, Module, anonyme Funktionen, Generics etc. enthält, war die erste Resonanz auf diese neue Programmiersprache verhalten, insbesondere weil es aus dem Hause Microsoft stammt. Aber nach der Ankündigung von Google die Version 2 von AngularJS in TypeScript zu implementieren, hat sich die Meinung über TypeScript geändert. Insbesondere bei großen Anwendungen soll TypeScript wegen seiner Eigenschaften vorteilhaft sein. Das sollte man untersuchen. In diesem Semicolon stellt Ihnen Peter Hecker TypeScript aus verschiedenen Perspektiven dar: TypeScript - Die Sprache, TypeScript und Mobile Anwendungen, TypeScript und Desktop Anwendungen, TypeScript - Fazit und Ausblick

1. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Herzlich Willkommen!
Gleich geht es los.

2. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TypeScript - Gut genug für große
Anwendungen? Oder nur
Brückentechnologie für Ihr
nächstes Projekt?
Treffpunkt „Semicolon“, 26.01.2016
Referent: Peter Hecker

3. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Peter Hecker
• Seit 1986: „Entwickler, Trainer“
• Seit 1995: „Web-Entwicklung“
• Seit 2009: „Mobile WebApps“
• @phecker65

4. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Themen
• TypeScript - Einstieg in TypeScript
• TypeScript und Anwendungen
• TypeScript - Fazit und Ausblick

5. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Einstieg in TypeScript

6. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
The Problem with JavaScript
https://dzone.com/articles/you-can-write-large-programs

7. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
„TypeScript: JavaScript Development at
Application Scale“
http://blogs.msdn.com/b/somasegar/archive/2012/10/01/
typescript-javascript-development-at-application-scale.aspx

8. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
„Anders Hejlsberg: Introducing
TypeScript“
https://channel9.msdn.com/posts/Anders-Hejlsberg-
Introducing-TypeScript

9. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.

10. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Angular 2: Built on TypeScript
http://blogs.msdn.com/b/typescript/archive/2015/03/05/
angular-2-0-built-on-typescript.aspx

11. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
https://www.google.de/trends/explore#q=typescript%2C%20angular%20typescript%2C%20coffeescript%2C%20ES6&date=1%2F2012%2049m&cmpt=q&tz=Etc%2FGMT-1

12. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
http://githut.info/

13. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.

14. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.

15. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
https://github.com/blog/2047-language-trends-on-github

16. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html
„So what is the outlook for
2016? I expect that Java, PHP
(with the new 7 release),
JavaScript and Swift will be
the top 10 winners for 2016.
Scala might gain a permanent
top 20 position, whereas Rust,
Clojure, Julia and TypeScript
will also move up considerably
in the chart.“

17. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
PLATTFORMEN
ECMAScript 5 (ES5)
ECMAScript 6 / 2015
(ES6, ES2015)
ECMAScript 3 (ES3)
ECMAScript 7
(ES7)
STANDARDS
Transpiler:
Traceur, Babel
CoffeeScript TypeScriptJavaScript ES6/ES7
SPRACHEN
TypeScript-
Compiler
CoffeeScript-
Compiler

18. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
function User(id, firstName, lastName) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
User.prototype = {
getId: function() {
return this.id;
},
getFirstName: function() {
return this.firstName;
},
getLastName: function() {
return this.lastName;
},
setFirstName: function(firstName) {
this.firstName = firstName;
},
setLastName: function(lastName) {
this.lastName = lastName;
}
};
JavaScript (ES5)

19. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
class User
constructor (@id, @firstName, @lastName) ->
getId: ->
@id
getFirstName: ->
@firstName
setFirstName: (@firstName) ->
getLastName: ->
@lastName
setLastName: (@lastName) ->
CoffeeScript

20. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
class User {
constructor(id, firstName, lastName) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
getId() {
return this.id;
}
getFirstName() {
return this.firstName;
}
setFirstName(firstName) {
this.firstName = firstName;
}
getLastName() {
return this.lastName;
}
setLastName(lastName) {
this.lastName = lastName;
}
}
ES6 / ES2015

21. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
class User {
private id: number;
private firstName: string;
private lastName: string;
constructor(id: number, firstName: string, lastName: string) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
getId() {
return this.id;
}
getFirstName(): string {
return this.firstName;
}
setFirstName(firstName: string) {
this.firstName = firstName;
}
getLastName(): string {
return this.lastName;
}
setLastName(lastName: string) : void {
this.lastName = lastName;
}
}
TypeScript

22. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
„TypeScript lets you write JavaScript
the way you really want to.“
http://www.typescriptlang.org/

23. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Hauptmerkmale
• Unterstützt Standard JavaScript Code (ES3, ES5, ES6)
• Bietet Statische Typisierung
• Kapselung durch Module und Klassen
• Unterstützt Konstruktoren, Eigenschaften, Funktionen
• Definition von Schnittstellen
• Lambdas oder Array-Funkionen
• Intellisense und Syntaxüberprüfung durch Werkzeuge

24. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TypeScript Syntax
• TypeScript ist eine Obermenge von JavaScript
• TypeScript folgt den JavaScript-Syntax-Regeln:
• {} definieren Codeblöcke
• Semicolon beenden Ausdrücke
• Spezielle Schlüsselworte

25. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TypeScript-Schlüsselworte
Schlüsselwort Beschreibung
class Container für Eigenschaften und Funktionen
constructor Initialisierung einer Klasse
exports Veröffentlicht einen Element
extends Erweitert eine Klasse bzw. Schnittstelle
implements Implementiert eine Schnittstelle
imports Importiert ein Modul
interface Definiert eine Schnittstelle
module Container für Klassen und Code
public/private Sichtbarkeit von Elementen
… Rest-Parameter
=> Array-Syntax für Definitionen und Funktionen
<typeName> < > Konvertierung von Typen
: Trennzeichen zwischen Variablen, Parameter, Typen

26. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Code-Hierarchie
Modul
KlasseSchnittstelle
Felder
Konstruktor
Eigenschaften
Funktionen

27. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TypeScript - Werkzeuge

28. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TypeScript Compiler
hello.ts > tsc hello.ts hello.js
JavaScript
> npm i -g typescript

29. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Werkzeuge
• IDE’s
• Visual Studio, Eclipse, Netbeans, WebStorm
• Editoren
• Visual Studio Code, Atom, Sublime

30. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Visual Studio
https://www.visualstudio.com/

31. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
VS Code
https://code.visualstudio.com/
https://code.visualstudio.com/docs/languages/typescript

32. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TypEcs
http://typecsdev.com/

33. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Atom
https://atom.io/
https://atom.io/packages/atom-typescript

34. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Werkzeuge
• Develop
• TSLint
• TSD

35. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TSLint
http://palantir.github.io/tslint/

36. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
TSD
http://definitelytyped.org/tsd/

37. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
DefinitelyTyped
http://definitelytyped.org/

38. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Werkzeuge
• Build
• tsc -watch *.ts (Poor Man’s Build)
• Grunt
• Gulp

39. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Grunt
http://gruntjs.com/
https://www.npmjs.com/package/grunt-ts
https://www.npmjs.com/package/grunt-typescript

40. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Gulp
http://gulpjs.com/
https://www.npmjs.com/package/gulp-tsc
https://www.npmjs.com/package/gulp-typescript

41. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Demo…

42. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
!
"
„Server“-App
# $
!
!
„Web“-App
„Mobile“-App

43. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
„TypeScript PlayGround“
http://www.typescriptlang.org/Playground

44. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Fazit

45. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Machen Sie TypeScript:
• wenn Sie Java/C# lieben und JavaScript hassen
• wenn Sie gerne in einer IDE arbeiten wollen
• wenn Sie häufig in Ihrem JavaScript-Code
„instanceOf“/„typeOf“ verwenden
• wenn Sie häufig Fehler aufgrund von fehlender
Typenprüfung haben
• wenn Sie in Ihrem Team keine Konventionen haben

46. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Machen Sie ES6/ES2015
• wenn Sie JavaScript lieben
• wenn Sie keine Typenüberprüfung benötigen bzw.
nutzen wollen
• wenn Sie Teil der größten Software-Entwickler-
Community und nicht einer kleinen Teilmenge sein
wollen

47. AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Das war’s!