TypeScript - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12...

TypeScriptfür SharePoint DEVs

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

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: Tobias.Meier@bridging-it.de

„

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

Editoren

Visual Studio

Visual Studio Code

WebStorm

Eclipse

u.s.w

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

})();

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

Casting

var auto = <Auto>meinMercedes;

var fahrzeug = <any> auto;

Herbst 2012

Alphaversion –

trotzdem produktiv

verwenden ?

Und im Notfall ?

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

Declaration

declare var $;

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

Typings

Installation: $ npm install typings --global

Beispiele:

typings search jquery

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

typings install dt~jquery --global

npm

$ npm install @types/sharepoint --save

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

SharePoint Framework

Konsequenzen

SharePoint-Entwickler benötigen Standard-Webskills

SharePoint-Entwickler nutzen die Standard-Toolchain für moderne Webentwicklung

SharePoint Framework

Demo

Intellisense, Refactoring

Referenzen, Typedefinitions

Konfigurationsmöglichkeiten

Debuggen

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 / 1.6

Neue ES6-Features

Let/const werden auch nach ES5 kompiliert

Decorators

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

String-Literale:interface Optionen { Fahrtrichtung:

"links" | "rechts" | "vor" | "zurueck"

}

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

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;

}

}

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

Meine Toolchain

Visual Studio 2015 / Visual Studio Code

IE / Chrome / Edge

ReSharper

NPM

Gulp

TypeScript wächst

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

Vielen Dank

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

Email: Tobias.Meier@bridging-it.de

Twitter: @bITTobiasMeier