Post on 04-Jun-2020
TypeScript
Tobias Meier, BridgingIT GmbHhttp://blog.bridging-it.de/author/Tobias.Meier
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: Tobias.Meier@bridging-it.de
„
Agenda
Bestandsaufnahme
Überblick TypeScript
Toolchain
Details
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
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 __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
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);
Casting
var auto = <Auto>meinMercedes;
var fahrzeug = <any> auto;
Editoren
Visual Studio
Visual Studio Code
WebStorm
Eclipse
u.s.w
Declaration
declare var $;
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
Typings
Installation: $ npm install typings --global
Beispiele:
typings search jquery
NAME SOURCE HOMEPAGE jquery dt http://jquery.com/
typings install dt~jquery --global
Typdefinitionen erzeugen
Browser führt JavaScript aus
TypeScriptQuellcode
SourceMap
Nur eine JavaScript-Datei
Demo
Intellisense, Refactoring
Referenzen, Typedefinitions
Konfigurationsmöglichkeiten
Debuggen
Herbst 2012
Alphaversion –
trotzdem produktiv
verwenden ?
Und im Notfall ?
Meine Toolchain
Visual Studio 2015 / Visual Studio Code
IE / Chrome / Edge
ReSharper
NPM
Gulp
Typings
JSPM
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
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
Neue ES6-Features
Let/const werden auch nach ES5 kompiliert
Decorators
Sublime Text plugin
TypeScript 1.6
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
Modul-Erweiterungen (Module Augmentation)
String-Literale:interface Optionen { Fahrtrichtung: "links" | "rechts" | "vor" | "zurueck" }
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
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 wächst
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
Angular 2.0: Big Picture
30.06.2016 – .Net User Group Karlsruhe
Tobias Meier Lead Softwarearchitekt Microsoft
Tobias.Meier@bridging-it.de Blog: http://blog.bridging-it.de/author/Tobias.Meier
@bitTobiasMeier
Automatisieren von Alltagsaufgaben: Tuning von Visual Studio
19.09 – 23.09.2016
Vielen Dank
Email: Tobias.Meier@bridging-it.de Twitter: @bITTobiasMeier
http://blog.bridging-it.de/author/Tobias.Meier
http://www.typescript-lang.org
http://blogs.msdn.com/b/typescript