29. treffen - tobias meier - typescript
Post on 18-Jul-2015
268 Views
Preview:
TRANSCRIPT
TypeScript
Tobias Meier, BridgingIT GmbH
Tobias.Meier@bridging-it.de @bITTobiasMeier
Tobias MeierLead Softwarearchitekt Microsoftdging-it.de
Standort Karlsruhe
Rüppurrer Straße 4
76137 Karlsruhe
Standort Stuttgart
Königstraße 42
70173 Stuttgart
Standort Zug
(Schweiz)
Baarerstraße 14
CH-6300 Zug
Standort Mannheim
N7, 5-6
68161 Mannheim
Standort Frankfurt
Solmsstraße 4
60486 Frankfurt
Standort München
Theresienhöhe 28
80339 München
Standort Köln
Waidmarkt 11
50676 Köln
Wir bringen Dinge zusammen
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";
//Implizit 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;
Declaration
declare var $;
Typdefinitionen verwenden
Interfacedefinitionen
Sammlung für alle gängigen Bibliotheken:
https://github.com/borisyankov/DefinitelyTyped
Über NuGet
Typdefinitionen erzeugen
Browser führt JavaScript aus
TypeScriptQuellcode
SourceMap
Demo
Intellisense, Refactoring
Referenzieren, Typedefinitions
Konfigurationsmöglichkeiten
Debuggen
Alphaversion –
trotzdem produktiv
verwenden ?
Und im Notfall ?
Meine Toolchain
Visual Studio 2013, 2015
IE / Chrome
Web Essentials TSLint
Resharper
Nur eine Javascript-Datei
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 Example extends Blume {constructor(private list: Array<number>) { } add(val:number):void {
this.list.push(val); }
}
var data: Array<number>; var example = new Example(data); example.add(10);Example.add ("Hallo"); //Fehler
Datentypen: Generics
export class GenericClass<T extends Example> {constructor(private value: T) {}
}
var data : Array<number>; var a1 = new GenericClass(new Example(data));
var a2 = new GenericClass(10);
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;
instanceof
class Dog { woof() { } }class Cat { meow() { } }
var pet: Dog|Cat = /* ... */;if(pet instanceof Dog) {
pet.woof(); } else {
pet.woof();}
„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);
}
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
AMD oder CommonJS
module nicht notwendig
export genügt
//Datei fahrzeug.ts
export class ExpAuto{
constructor (data:string){
}
}
import car= require("fahrzeug");
var auto = new car.ExpAuto("Tesla");
Externe Module
//Datei fahrzeug.ts
class ExpAuto{
constructor (data:string){
}
}export = ExpAuto;
import car= require("fahrzeug");
var auto = new car("Tesla");
Scopes
test() {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
test() {var 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
EcmaScript 6 - Syntax
Voraussetzung
Windows 10 Preview März
Visual Studio 2015 CTP 6
Angular 2: Built on TypeScript
We're excited to unveil the result of a months-long partnership with the Angular team.
This partnership has been 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] am 05.03.2015 Quelle: http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx
Typescript 1.5 (Alpha)
Neue ES6-Features
Let/const werden auch nach ES5 kompiliert
Decorators
Sublime Text plugin
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
Vielen Dank
http://www.typescript-lang.org
http://blogs.msdn.com/b/typescript
Email: Tobias.Meier@bridging-it.de Twitter: @bITTobiasMeier
top related