typescript - bridgingit gmbhblog.bridging-it.de/media/blog/artikel/tobias-meier/2016...2016/12/12...
TRANSCRIPT
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: [email protected]
„
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: [email protected]
Twitter: @bITTobiasMeier