TypeScript

Tobias Meier, BridgingIT GmbHhttp://blog.bridging-it.de/author/Tobias.Meier

Tobias MeierLead Softwarearchitekt Microsoftdging-it.de

Standort Karlsruhe

Rüppurrer Straße 4

76137 Karlsruhe

Standort Zug/Schweiz

Baarerstraße 14

CH-6300 Zug

Standort Nürnberg

Königtorgraben 11

90402 Nürnberg

Standort Stuttgart

Marienstraße 17

70178 Stuttgart

Standort Mannheim

N7, 5-6

68161 Mannheim

Standort Frankfurt

Solmsstraße 4

60486 Frankfurt

Standort München

Riesstraße 12

80992 München

Standort Köln

Waidmarkt 11

50676 Köln

Wir bringen Dinge zusammen

Blog: http://blog.bridging-it.de/author/Tobias.MeierTwitter: @bitTobiasMeierEmail: Tobias.Meier@bridging-it.de

„

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

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

Editoren

Visual Studio

Visual Studio Code

WebStorm

Eclipse

u.s.w

Declaration

declare var $;

Typdefinitionen verwenden

Interfacedefinitionen

Sammlung für alle gängigen Bibliotheken:

https://github.com/borisyankov/DefinitelyTyped

Über NuGet

Typings Packagemanager: https://www.npmjs.com/package/typings

Typings

Installation: $ npm install typings --global

Beispiele:

typings search jquery

NAME SOURCE HOMEPAGE jquery dt http://jquery.com/

typings install dt~jquery --global

Typdefinitionen erzeugen

Browser führt JavaScript aus

TypeScriptQuellcode

SourceMap

Nur eine JavaScript-Datei

Demo

Intellisense, Refactoring

Referenzen, Typedefinitions

Konfigurationsmöglichkeiten

Debuggen

Herbst 2012

Alphaversion –

trotzdem produktiv

verwenden ?

Und im Notfall ?

Meine Toolchain

Visual Studio 2015 / Visual Studio Code

IE / Chrome / Edge

ReSharper

NPM

Gulp

Typings

JSPM

We're excited to unveil the result of a months-long partnership with the Angular team. This partnership has been [a] 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)

Angular 2: Built on TypeScript

http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx

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 CalculatorHistory {constructor(private list: Array<number>) { } add(val:number):void {

this.list.push(val); }

}

var data: Array<number>; var calc = new CalculatorHistory(data); calc.add(10);calc.add ("Hallo"); //Fehler

Datentypen: Generics

export class History<T extends CalculatorHistory> {constructor(private value: T) {}

}

var data : Array<number> = []; var a1 = new History (

new CalculatorHistory(data));

var a2 = new History (10); //Fehler

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;

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

}

Namespaces (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

import {ExpAuto}from "fahrzeug";

var auto = new ExpAuto("Tesla");

//Datei fahrzeug.ts

export class ExpAuto{

constructor (data:string){

}

}

Externe Module einbetten

RequireJS

Harmoniert nicht mit TypeScript.

Sobald die Pakete in unterschiedlichen Verzeichnissen liegen können diese nicht mehr gefunden werden.

SystemJS

Perfekte Zusammenarbeit mit TypeScript

Verwendet den JSPM-Package-Manager

Scopes

testvar() {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

testlet() {let 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

Module (Externe Namespaces)

Scopes

Voraussetzung:

VS 2015 (TS 1.5)

TypeScript 1.5

Neue ES6-Features

Let/const werden auch nach ES5 kompiliert

Decorators

Sublime Text plugin

TypeScript 1.6

Local Types

Class expressions

Abstrakte Klassen und Methoden

Generische Type-Aliase

TypeScript 1.7

Polimorphic this Typing

Potenz-Operator ** : 2**3 == 2*2*2

Async/Await for ES6 target

async / await

async function main() {await ping();

}

async function ping() {for (var i = 0; i < 10; i++) {await delay(300);console.log("ping");

}}

function delay(ms: number) {return new Promise(resolve => setTimeout(resolve, ms));

}

main();

TypeScript 1.8

Unreachable Code-Erkennung

Implizites Return

Modul-Erweiterungen (Module Augmentation)

String-Literale:interface Optionen { Fahrtrichtung: "links" | "rechts" | "vor" | "zurueck" }

TypeScript 2.0 (später in 2016)

Async wird nach ES5 und ES3 transpiliert

ControlFlow-Based Typeanalysis

TypeDefinitions werden zu NPM-Packages und können so über NPM, über den Compiler, geladen werden

Lösung für 2 Billion Dollar-Fehler: Undefined und Null in JS

TypeScript 2.0: Null und undefined

add (zahl1:number, zahl2: number|null):number {

return zahl1 + zahl2 != null ? Zahl2 : 0;

}

var result = this.add (1,1); => 2

var result = this.add (1,null); // => 1

//Kompilierfehler

var result = this.add (null,1);

TypeScript wächst

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

Angular 2.0: Big Picture

30.06.2016 – .Net User Group Karlsruhe

Tobias Meier Lead Softwarearchitekt Microsoft

Tobias.Meier@bridging-it.de Blog: http://blog.bridging-it.de/author/Tobias.Meier

@bitTobiasMeier

Automatisieren von Alltagsaufgaben: Tuning von Visual Studio

19.09 – 23.09.2016

Vielen Dank

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

http://blog.bridging-it.de/author/Tobias.Meier

http://www.typescript-lang.org

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