TypeScript

Tobias Meier, BridgingIT GmbH

Tobias.Meier@bridging-it.de @bITTobiasMeier

Tobias MeierLead 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

Agenda

Bestandsaufnahme

Überblick TypeScript

Toolchain

Details

JavaScript

JavaScript

Intellisense

Typsicherheit

Compiler

Refactoring

…….

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.)

TypeScript 0.8

Typsicherheit

Vererbung

Module

Compiler

Superset von JavaScript

http://www.typescriptlang.org/Playground

Datentypen: Number

var zahl: number;

var zahl2 = 33;

zahl = 2;

zahl = "abc";

//Implizit Datentyp number

Interfaces, Klassen und Vererbunginterface 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

Interfaces, Klassen und Vererbungvar 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);

Casting

var auto = <Auto>meinMercedes;

var fahrzeug = <any> auto;

Declaration

declare var $;

Typdefinitionen verwenden

Interfacedefinitionen

Sammlung für alle gängigen Bibliotheken:

https://github.com/borisyankov/DefinitelyTyped

Über NuGet

Typdefinitionen erzeugen

Browser führt JavaScript aus

TypeScriptQuellcode

SourceMap

Demo

Intellisense, Refactoring

Referenzieren, Typedefinitions

Konfigurationsmöglichkeiten

Debuggen

Alphaversion –

trotzdem produktiv

verwenden ?

Und im Notfall ?

Meine Toolchain

Visual Studio 2013, 2015

IE / Chrome

Web Essentials TSLint

Resharper

Nur eine Javascript-Datei

Details

Properties

Datentypen

Lambda Expressions

Module

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;

} }

Wichtigste Neuerung

in .Net 2.0 ?

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

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);

Datentypen: Union Types

function f(x: number | number[]) { if (typeof x === "number") {

return x + 10; } else {

// return sum of numbers}

}

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 */;

Datentypen: Konstante Enums

const enum Color {Red, Green, Yellow)

var mycolor = Color.Green;

var mycolor = 1 /* Green */;

Type Aliase

type BoolArray = Array<boolean>;type NumberCallback = (zahl:number) => void;

instanceof

class Dog { woof() { } }class Cat { meow() { } }

var pet: Dog|Cat = /* ... */;if(pet instanceof Dog) {

pet.woof(); } else {

pet.woof();}

„this“ und JavaScript

class Greeter{//...start() {

this.timerToken = setInterval(function () {this.span.innerHTML = new Date().toUTCString();

}, 500); }

}

„this“ und JavaScript

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

}

Lambda und „this“

start() { this.timerToken = setInterval(() =>this.span.innerHTML = new Date().toUTCString(), 500);

}

Interne Module

module demo{

export class ExpAuto{

constructor (data:string){

}

}

}

var auto1 =new demo.ExpAuto ("Tesla");

import MyAuto = demo.ExpAuto;

var auto2 = new MyAuto()

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");

Externe Module

//Datei fahrzeug.ts

class ExpAuto{

constructor (data:string){

}

}export = ExpAuto;

import car= require("fahrzeug");

var auto = new car("Tesla");

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());

}

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());

}

Demo

EcmaScript 6 - Syntax

Voraussetzung

Windows 10 Preview März

Visual Studio 2015 CTP 6

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

Typescript 1.5 (Alpha)

Neue ES6-Features

Let/const werden auch nach ES5 kompiliert

Decorators

Sublime Text plugin

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

Vielen Dank

http://www.typescript-lang.org

http://blogs.msdn.com/b/typescript

Email: Tobias.Meier@bridging-it.de Twitter: @bITTobiasMeier