![Page 1: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/1.jpg)
TypeScriptfür SharePoint DEVs
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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/2.jpg)
Tobias MeierLead Softwarearchitekt Microsoftdging-it.de
Standort Frankfurt
Solmsstraße 4
60486 Frankfurt
Standort Zug/Schweiz
Baarerstraße 14
CH-6300 Zug
Standort Stuttgart
Marienstraße 17
70178 Stuttgart
Standort Nürnberg
Königtorgraben 11
90402 Nürnberg
Standort Karlsruhe
Rüppurrer Straße 4
76137 Karlsruhe
Standort München
Riesstraße 12
80992 München
Standort Mannheim
N7, 5-6
68161 Mannheim
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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/3.jpg)
![Page 4: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/4.jpg)
JavaScript
![Page 5: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/5.jpg)
![Page 6: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/6.jpg)
![Page 7: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/7.jpg)
![Page 8: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/8.jpg)
![Page 9: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/9.jpg)
JavaScript
Intellisense
Typsicherheit
Compiler
Refactoring
…….
![Page 10: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/11.jpg)
![Page 12: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/13.jpg)
Editoren
Visual Studio
Visual Studio Code
WebStorm
Eclipse
u.s.w
![Page 14: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/14.jpg)
http://www.typescriptlang.org/Playground
![Page 15: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/15.jpg)
Datentypen: Number
var zahl: number;
var zahl2 = 33;
zahl = 2;
zahl = "abc";
//Impliziter Datentyp number
![Page 16: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/16.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 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;
})();
![Page 17: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/17.jpg)
Interfaces, Klassen und Vererbungvar __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 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 18: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/18.jpg)
Casting
var auto = <Auto>meinMercedes;
var fahrzeug = <any> auto;
![Page 19: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/19.jpg)
Herbst 2012
Alphaversion –
trotzdem produktiv
verwenden ?
![Page 20: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/20.jpg)
Und im Notfall ?
![Page 21: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/21.jpg)
![Page 22: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/22.jpg)
TypeScript QuellcodeBrowser führt JavaScript aus
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);
SourceMap
![Page 23: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/23.jpg)
Declaration
declare var $;
![Page 24: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/24.jpg)
Typdefinitionen verwenden
Interfacedefinitionen
Sammlung für alle gängigen Bibliotheken:
https://github.com/borisyankov/DefinitelyTyped
Über NuGet
tsd
Typings Packagemanager: https://www.npmjs.com/package/typings
Ab TypeScript 2.0: npm
![Page 25: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/25.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 26: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/26.jpg)
npm
$ npm install @types/sharepoint --save
![Page 27: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/27.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 28: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/28.jpg)
SharePoint Framework
![Page 29: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/29.jpg)
Konsequenzen
SharePoint-Entwickler benötigen Standard-Webskills
SharePoint-Entwickler nutzen die Standard-Toolchain für moderne Webentwicklung
SharePoint Framework
![Page 30: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/30.jpg)
Demo
Intellisense, Refactoring
Referenzen, Typedefinitions
Konfigurationsmöglichkeiten
Debuggen
![Page 31: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/31.jpg)
Details
Properties
Datentypen
Lambda Expressions
Module
![Page 32: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/33.jpg)
Wichtigste Neuerung
in .Net 2.0 ?
![Page 34: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/43.jpg)
![Page 44: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/50.jpg)
TypeScript 1.5 / 1.6
Neue ES6-Features
Let/const werden auch nach ES5 kompiliert
Decorators
Local Types
Class expressions
Abstrakte Klassen und Methoden
Generische Type-Aliase
![Page 51: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/51.jpg)
TypeScript 1.7
Polimorphic this Typing
Potenz-Operator ** : 2**3 == 2*2*2
Async/Await for ES6 target
![Page 52: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/52.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 53: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/53.jpg)
TypeScript 1.8
Unreachable Code-Erkennung
Implizites Return
String-Literale:interface Optionen { Fahrtrichtung:
"links" | "rechts" | "vor" | "zurueck"
}
![Page 54: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/54.jpg)
TypeScript 2.0
ControlFlow-Based Typeanalysis
Readonly Properties
TSConfig: Include / Exclude kombinieren
Typdefinitioinen über NPM, …
Lösung für 2 Billion Dollar-Fehler: Undefined und Null in JS
Tagged Union Types
https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-20
![Page 55: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/55.jpg)
Tagged Union Type
interface Square {
kind: "square";
size: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
interface Circle {
kind: "circle";
radius: number;
}
type Shape = Square | Rectangle | Circle;
function area(s: Shape) {
switch (s.kind) {
case "square": return s.size * s.size;
case "rectangle": return s.width * s.height;
case "circle": return Math.PI * s.radius * s.radius;
}
}
![Page 56: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/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...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/57.jpg)
TypeScript 2.1
Async wird nach ES5 und ES3 transpiliert
Keyof-Operator
MappedTypes
https://blogs.msdn.microsoft.com/typescript/2016/12/07/announcing-typescript-2-1/
![Page 58: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/58.jpg)
Meine Toolchain
Visual Studio 2015 / Visual Studio Code
IE / Chrome / Edge
ReSharper
NPM
Gulp
![Page 59: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/59.jpg)
TypeScript wächst
![Page 60: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/60.jpg)
TypeScript für SharePoint-DEVs
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 61: TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12 · TypeScript 2.0 ControlFlow-Based Typeanalysis Readonly Properties TSConfig: Include](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f39acdad61d1427303015ea/html5/thumbnails/61.jpg)
Vielen Dank
Blog: http://blog.bridging-it.de/author/Tobias.Meier
Email: [email protected]
Twitter: @bITTobiasMeier