typescript - bridgingit...
TRANSCRIPT
![Page 1: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/1.jpg)
TypeScript
Tobias Meier, BridgingIT GmbHhttp://blog.bridging-it.de/author/Tobias.Meier
![Page 2: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/2.jpg)
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: [email protected]
„
![Page 3: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/3.jpg)
Agenda
Bestandsaufnahme
Überblick TypeScript
Toolchain
Details
![Page 4: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/4.jpg)
JavaScript
![Page 5: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/5.jpg)
![Page 6: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/6.jpg)
![Page 7: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/7.jpg)
![Page 8: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/8.jpg)
![Page 9: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/9.jpg)
JavaScript
Intellisense
Typsicherheit
Compiler
Refactoring
…….
![Page 10: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/10.jpg)
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.)
„
„
![Page 11: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/11.jpg)
![Page 12: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/12.jpg)
TypeScript 0.8
Typsicherheit
Vererbung
Module
Compiler
Superset von JavaScript
![Page 13: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/13.jpg)
http://www.typescriptlang.org/Playground
![Page 14: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/14.jpg)
Datentypen: Number
var zahl: number;
var zahl2 = 33;
zahl = 2;
zahl = "abc";
//Impliziter Datentyp number
![Page 15: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/15.jpg)
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
![Page 16: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/16.jpg)
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);
![Page 17: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/17.jpg)
Casting
var auto = <Auto>meinMercedes;
var fahrzeug = <any> auto;
![Page 18: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/18.jpg)
Editoren
Visual Studio
Visual Studio Code
WebStorm
Eclipse
u.s.w
![Page 19: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/19.jpg)
Declaration
declare var $;
![Page 20: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/20.jpg)
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
![Page 21: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/21.jpg)
Typings
Installation: $ npm install typings --global
Beispiele:
typings search jquery
NAME SOURCE HOMEPAGE jquery dt http://jquery.com/
typings install dt~jquery --global
![Page 22: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/22.jpg)
Typdefinitionen erzeugen
![Page 23: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/23.jpg)
![Page 24: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/24.jpg)
Browser führt JavaScript aus
TypeScriptQuellcode
SourceMap
![Page 25: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/25.jpg)
Nur eine JavaScript-Datei
![Page 26: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/26.jpg)
Demo
Intellisense, Refactoring
Referenzen, Typedefinitions
Konfigurationsmöglichkeiten
Debuggen
![Page 27: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/27.jpg)
Herbst 2012
Alphaversion –
trotzdem produktiv
verwenden ?
![Page 28: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/28.jpg)
Und im Notfall ?
![Page 29: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/29.jpg)
Meine Toolchain
Visual Studio 2015 / Visual Studio Code
IE / Chrome / Edge
ReSharper
NPM
Gulp
Typings
JSPM
![Page 30: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/30.jpg)
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
![Page 31: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/31.jpg)
Details
Properties
Datentypen
Lambda Expressions
Module
![Page 32: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/32.jpg)
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;
} }
![Page 33: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/33.jpg)
Wichtigste Neuerung
in .Net 2.0 ?
![Page 34: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/34.jpg)
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
![Page 35: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/35.jpg)
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
![Page 36: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/36.jpg)
Datentypen: Union Types
function f(x: number | number[]) { if (typeof x === "number") {
return x + 10; } else {
// return sum of numbers}
}
![Page 37: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/37.jpg)
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 */;
![Page 38: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/38.jpg)
Datentypen: Konstante Enums
const enum Color {Red, Green, Yellow}
var mycolor = Color.Green;
var mycolor = 1 /* Green */;
![Page 39: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/39.jpg)
Type Aliase
type BoolArray = Array<boolean>;type NumberCallback = (zahl:number) => void;
![Page 40: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/40.jpg)
„this“ und JavaScript
class Greeter{//...start() {
this.timerToken = setInterval(function () {this.span.innerHTML = new Date().toUTCString();
}, 500);
}}
![Page 41: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/41.jpg)
„this“ und JavaScript
class Greeter{//...start() { var _this = this; this.timerToken = setInterval(function () {_this.span.innerHTML = new Date().toUTCString();}, 500); }}
![Page 42: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/42.jpg)
Lambda und „this“
start() { this.timerToken = setInterval(() =>this.span.innerHTML = new Date().toUTCString(), 500);
}
![Page 43: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/43.jpg)
![Page 44: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/44.jpg)
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()
![Page 45: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/45.jpg)
Externe Module
import {ExpAuto}from "fahrzeug";
var auto = new ExpAuto("Tesla");
//Datei fahrzeug.ts
export class ExpAuto{
constructor (data:string){
}
}
![Page 46: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/46.jpg)
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
![Page 47: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/47.jpg)
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());
}
![Page 48: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/48.jpg)
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());
}
![Page 49: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/49.jpg)
Demo
Module (Externe Namespaces)
Scopes
Voraussetzung:
VS 2015 (TS 1.5)
![Page 50: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/50.jpg)
TypeScript 1.5
Neue ES6-Features
Let/const werden auch nach ES5 kompiliert
Decorators
Sublime Text plugin
![Page 51: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/51.jpg)
TypeScript 1.6
Local Types
Class expressions
Abstrakte Klassen und Methoden
Generische Type-Aliase
![Page 52: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/52.jpg)
TypeScript 1.7
Polimorphic this Typing
Potenz-Operator ** : 2**3 == 2*2*2
Async/Await for ES6 target
![Page 53: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/53.jpg)
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();
![Page 54: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/54.jpg)
TypeScript 1.8
Unreachable Code-Erkennung
Implizites Return
Modul-Erweiterungen (Module Augmentation)
String-Literale:interface Optionen { Fahrtrichtung: "links" | "rechts" | "vor" | "zurueck" }
![Page 55: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/55.jpg)
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
![Page 56: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/56.jpg)
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);
![Page 57: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/57.jpg)
TypeScript wächst
![Page 58: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/58.jpg)
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
![Page 59: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/59.jpg)
Angular 2.0: Big Picture
30.06.2016 – .Net User Group Karlsruhe
Tobias Meier Lead Softwarearchitekt Microsoft
[email protected] Blog: http://blog.bridging-it.de/author/Tobias.Meier
@bitTobiasMeier
![Page 60: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/60.jpg)
Automatisieren von Alltagsaufgaben: Tuning von Visual Studio
19.09 – 23.09.2016
![Page 61: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016.06.15_ts_devgroupm.pdfannounce that Angular 2 will now be built with TypeScript. We're looking](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01dc227e708231d40162f1/html5/thumbnails/61.jpg)
Vielen Dank
Email: [email protected] Twitter: @bITTobiasMeier
http://blog.bridging-it.de/author/Tobias.Meier
http://www.typescript-lang.org
http://blogs.msdn.com/b/typescript