Vortrag: Tobias Meier (ca. 90 Minuten) - „TypeScript” JavaScript, früher lediglich zur Anreicherung von Webseiten verwendet, dient inzwischen als Programmiersprache für umfangreiche Applikationen. Allerdings sind viele Entwickler nicht ganz glücklich mit der Sprache und vermissen Features wie statische Typprüfungen oder Vererbung. Auch die großen Konzerne haben mit diesen “Herausforderungen” zu kämpfen. Im Oktober 2012 hat Anders Hejlsberg, (Mit-)Erfinder von Delphi und .Net, TypeScript vorgestellt. Bei TypeScript handelt es sich um ein Superset von JavaScript, welches dieses um Klassen, Module, Interfaces, Datentypen u.ä. ergänzt. Inzwischen hat auch das AngularJS-Team bekanntgegeben dass sie zukünftig auf TypeScript aufsetzen. Tobias Meier stellt die aktuelle Version von TypeScript vor und zeigt, wie TypeScript uns sowohl bei der Entwicklung von Singe Page Applications als auch herkömmlichen Webapplikationen unterstützt. Tobias Meier ist Lead Softwarearchitekt Microsoft bei der BridgingIT GmbH und setzt TypeScript bereits seit der ersten verfügbaren Preview erfolgreich in Kundenprojekten ein.

1. TypeScript
Tobias Meier, BridgingIT GmbH
Tobias.Meier@bridging-it.de @bITTobiasMeier

2. Tobias Meier
Lead Softwarearchitekt Microsoftdging-it.de
Standort Karlsruhe
Rüppurrer Straße 4
76137 Karlsruhe
Standort Stuttgart
Königstraße 42
70173 Stuttgart
Standort Zug
(Schweiz)
Baarerstraße 14
CH-6300 Zug
Standort Mannheim
N7, 5-6
68161 Mannheim
Standort Frankfurt
Solmsstraße 4
60486 Frankfurt
Standort München
Theresienhöhe 28
80339 München
Standort Köln
Waidmarkt 11
50676 Köln
Wir bringen Dinge zusammen

3. Agenda
 Bestandsaufnahme
 Überblick TypeScript
 Toolchain
 Details

4. JavaScript

9. JavaScript
 Intellisense
 Typsicherheit
 Compiler
 Refactoring
 …….

10.  Are you saying you cannot write large programs in
JavaScript ?
 No, you can write large programs in JavaScript. You just
can’t maintain them.
Erik Meijer
Anders Hejlsberg
http://channel9.msdn.com/Events/Lang-NEXT/Lang-NEXT-2012/Panel-Web-and-Cloud-Programming
(02.04.2012, ca. 11. Min.)

12. TypeScript 0.8
 Typsicherheit
 Vererbung
 Module
 Compiler
 Superset von JavaScript

13. http://www.typescriptlang.org/Playground

14. Datentypen: Number
var zahl: number;
var zahl2 = 33;
zahl = 2;
zahl = "abc";
//Implizit Datentyp number

15. Interfaces, Klassen und Vererbung
interface IFahrzeug {
fahren(kmh: number): void;
bremsen?():void;
}
class Auto implements IFahrzeug {
fahren(kmh: number): void {
var span = document.
createElement('span');
span.textContent = "fahre " +
kmh.toLocaleString();
document.body.appendChild(span);
}
}
var __extends = this.__extends ||
function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var Auto = (function () {
function Auto() { }
Auto.prototype.fahren = function (kmh) {
var span = document.createElement('span');
span.textContent = "fahre " +
kmh.toLocaleString();
document.body.appendChild(span);
};
return Auto;
})(); IFFE

16. Interfaces, Klassen und Vererbung
var Tesla = (function (_super) {
__extends(Tesla, _super);
function Tesla() {
_super.apply( this, arguments);
}
return Tesla;
})(Auto);
var fahrzeug;
fahrzeug = new Tesla();
fahrzeug.fahren(20);
class Tesla extends Auto { }
var fahrzeug: IFahrzeug;
fahrzeug = new Tesla();
fahrzeug.fahren(20);

17. Casting
var auto = <Auto>meinMercedes;
var fahrzeug = <any> auto;

18. Declaration
declare var $;

19. Typdefinitionen verwenden
 Interfacedefinitionen
 Sammlung für alle gängigen Bibliotheken:
https://github.com/borisyankov/DefinitelyTyped
 Über NuGet

20. Typdefinitionen erzeugen

22. Browser führt
JavaScript aus
TypeScript
Quellcode
SourceMap

23. Demo
 Intellisense, Refactoring
 Referenzieren, Typedefinitions
 Konfigurationsmöglichkeiten
 Debuggen

24. Alphaversion –
trotzdem produktiv
verwenden ?

25. Und im Notfall ?

26. Meine Toolchain
 Visual Studio 2013, 2015
 IE / Chrome
 Web Essentials
 TSLint
 Resharper

27. Nur eine Javascript-Datei

28. Details
 Properties
 Datentypen
 Lambda Expressions
 Module

29. Properties
var auto = new Auto();
auto.kmh = 100;
class Auto {
private _kmh: number;
get kmh(): number {
return this._kmh;
}
set kmh(value: number) {
this._kmh = value;
}
}

30. Wichtigste Neuerung
in .Net 2.0 ?

31. Datentypen: Generics
export class Example extends Blume {
constructor(private list: Array<number>) {
}
add(val:number):void {
this.list.push(val);
}
}
var data: Array<number>;
var example = new Example(data);
example.add(10);
Example.add ("Hallo"); //Fehler

32. Datentypen: Generics
export class GenericClass<T extends Example> {
constructor(private value: T) {
}
}
var data : Array<number>;
var a1 = new GenericClass(new Example(data));
var a2 = new GenericClass(10);

33. Datentypen: Union Types
function f(x: number | number[]) {
if (typeof x === "number") {
return x + 10;
} else {
// return sum of numbers
}
}

34. Datentypen: Enums
enum Color {Red, Green, Yellow)
var mycolor = Color.Green;
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Yellow"] = 2] = "Yellow";
})(Color || (Color = {}));
var mycolor = 1 /* Green */;

35. Datentypen: Konstante Enums
const enum Color {Red, Green, Yellow)
var mycolor = Color.Green;
var mycolor = 1 /* Green */;

36. Type Aliase
type BoolArray = Array<boolean>;
type NumberCallback = (zahl:number) => void;

37. instanceof
class Dog { woof() { } }
class Cat { meow() { } }
var pet: Dog|Cat = /* ... */;
if(pet instanceof Dog) {
pet.woof();
} else {
pet.woof();
}

38. „this“ und JavaScript
class Greeter{
//...
start() {
this.timerToken = setInterval(function () {
this.span.innerHTML = new Date().toUTCString();
}
, 500);
}
}

39. „this“ und JavaScript
class Greeter{
//...
start() {
var _this = this;
this.timerToken = setInterval(function () {
_this.span.innerHTML = new Date().toUTCString();
}
, 500);
}
}

40. Lambda und „this“
start() {
this.timerToken = setInterval(() =>
this.span.innerHTML = new Date().toUTCString()
, 500);
}

41. Interne Module
module demo{
export class ExpAuto{
constructor (data:string){
}
}
}
var auto1 =
new demo.ExpAuto ("Tesla");
import MyAuto = demo.ExpAuto;
var auto2 = new MyAuto()

42. Externe Module
 AMD oder CommonJS
 module nicht notwendig
 export genügt
//Datei fahrzeug.ts
export class ExpAuto{
constructor (data:string){
}
}
import car=
require("fahrzeug");
var auto = new car.ExpAuto("Tesla");

43. Externe Module
//Datei fahrzeug.ts
class ExpAuto{
constructor (data:string){
}
}
export = ExpAuto;
import car=
require("fahrzeug");
var auto = new car("Tesla");

44. Scopes
test() {
var x = 3;
this.addMsg("x:" + x.toLocaleString());
if (x === 3){
var x = 2;
this.addMsg("x (im IF):" + x.toLocaleString());
}
this.addMsg("x (außerhalb):" + x.toLocaleString());
}

45. Mehr Scopes dank Let
test() {
var x = 3;
this.addMsg("x:" + x.toLocaleString());
if (x === 3){
let x = 2;
this.addMsg("x (im IF):" + x.toLocaleString());
}
this.addMsg("x (außerhalb):" + x.toLocaleString());
}

46. Demo
EcmaScript 6 - Syntax
Voraussetzung
 Windows 10 Preview März
 Visual Studio 2015 CTP 6

47. Angular 2: Built on TypeScript
We're excited to unveil the result of a months-long
partnership with the Angular team.
This partnership has been very productive and rewarding
experience for us, and as part of this collaboration, we're
happy to announce that Angular 2 will now be built with
TypeScript. We're looking forward to seeing what people will
be able to do with these new tools and continuing to work
with the Angular team to improve the experience for Angular
developers.
Jonathan Turner [MS] am 05.03.2015
Quelle: http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx

48. Typescript 1.5 (Alpha)
 Neue ES6-Features
 Let/const werden auch
nach ES5 kompiliert
 Decorators
 Sublime Text plugin

49. TypeScript
Was es kann
 Typsicherheit
 Vererbung (Prototypal Inheritance)
 Module-Management
 Gültigkeitsbereiche (teilweise)
 Basis für besseren Refactoring-Support
Was es nicht kann:
 JavaScript ersetzen

50. Vielen Dank
 http://www.typescript-lang.org
 http://blogs.msdn.com/b/typescript
Email: Tobias.Meier@bridging-it.de Twitter: @bITTobiasMeier