TypeScript. Tobias Meier, BridgingIT GmbH.

Transkript

1 TypeScript Tobias Meier, BridgingIT GmbH

2 Tobias Meier Lead Softwarearchitekt Microsoftdging-it.de Blog: Twitter: bittobiasmeier Wir bringen Dinge zusammen Standort Mannheim N7, Mannheim Standort Karlsruhe Rüppurrer Straße Karlsruhe Standort München Riesstraße München Standort Nürnberg Königtorgraben Nürnberg Standort Frankfurt Solmsstraße Frankfurt Standort Stuttgart Marienstraße Stuttgart Standort Köln Waidmarkt Köln Standort Zug/Schweiz Baarerstraße 14 CH-6300 Zug

3 Agenda Bestandsaufnahme Überblick TypeScript Toolchain Details

4 JavaScript

5

6

7

8

9 JavaScript Intellisense Typsicherheit Compiler Refactoring.

10 Are you saying you cannot write large programs in JavaScript? Erik Meijer No, you can write large programs in JavaScript. You just can t maintain them. Anders Hejlsberg ( , ca. 11. Min.)

11

12 TypeScript 0.8 Typsicherheit Vererbung Module Compiler Superset von JavaScript

13

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

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 class Tesla extends Auto { var fahrzeug: IFahrzeug; fahrzeug = new Tesla(); fahrzeug.fahren(20); var Tesla = (function (_super) { extends(tesla, _super); function Tesla() { _super.apply( this, arguments); return Tesla; )(Auto); var fahrzeug; fahrzeug = new Tesla(); fahrzeug.fahren(20);

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

18 Editoren Visual Studio Visual Studio Code WebStorm Eclipse u.s.w

19 Declaration declare var $;

20 Typdefinitionen verwenden Interfacedefinitionen Sammlung für alle gängigen Bibliotheken: Über NuGet Typings Packagemanager:

21 Typings Installation: $ npm install typings --global Beispiele: typings search jquery NAME SOURCE HOMEPAGE jquery dt typings install dt~jquery --global

22 Typdefinitionen erzeugen

23

24 Browser führt JavaScript aus SourceMap TypeScript Quellcode

25 Nur eine JavaScript-Datei

26 Demo Intellisense, Refactoring Referenzen, Typedefinitions Konfigurationsmöglichkeiten Debuggen

27 Herbst 2012 Alphaversion trotzdem produktiv verwenden?

28 Und im Notfall?

29 Meine Toolchain Visual Studio 2015 / Visual Studio Code IE / Chrome / Edge ReSharper NPM Gulp Typings JSPM

30 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 [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)

31 Details Properties Datentypen Lambda Expressions Module

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

33 Wichtigste Neuerung in.net 2.0?

34 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); calc.add(10); calc.add ("Hallo"); //Fehler

35 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

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

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

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

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

40 this und JavaScript class Greeter{ //... start() { this.timertoken = setinterval(function () { this.span.innerhtml = new Date().toUTCString();, 500);

41 this und JavaScript class Greeter{ //... start() { var _this = this; this.timertoken = setinterval(function () { _this.span.innerhtml = new Date().toUTCString();, 500);

42 Lambda und this start() { this.timertoken = setinterval(() => this.span.innerhtml = new Date().toUTCString(), 500);

43

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

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

46 Externe Module einbetten RequireJS SystemJS Harmoniert nicht mit TypeScript. Sobald die Pakete in unterschiedlichen Verzeichnissen liegen können diese nicht mehr gefunden werden. Perfekte Zusammenarbeit mit TypeScript Verwendet den JSPM- Package-Manager

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

48 Mehr Scopes dank Let testlet() { 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());

49 Demo Module (Externe Namespaces) Scopes Voraussetzung: VS 2015 (TS 1.5)

50 Typescript 1.5 Neue ES6-Features Let/const werden auch nach ES5 kompiliert Decorators Sublime Text plugin

51 Typescript 1.6 Local Types Class expressions Abstrakte Klassen und Methoden Generische Type-Aliase

52 Typescript 1.7 Async/Await for ES6 target Polimorphic this Typing Potenz-Operator ** : 2**3 == 2*2*2

53 Typescript 1.8 Unreachable Code-Erkennung Implizites Return Modul-Erweiterungen (Module Augmentation) String-Literale: interface Optionen { Fahrtrichtung: "links" "rechts" "vor" "zurueck"

54 TypeScript wächst

55 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

56 Angular 2.0: Big Picture Net User Group Karlsruhe Tobias Lead Softwarearchitekt Microsoft Blog:

57 Vielen Dank