TypeScript
Tobias Meier, BridgingIT GmbH
Tobias.Meier@bridging-it.de @bITTobiasMeier
Tobias Meier
Lead Softwarearchitekt Microsoftdging-it.de
Standort Karlsruhe
Rüppurrer Straße 4
76137 Karlsruhe
Standort St...
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 jus...
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 Vererbung
interface IFahrzeug {
fahren(kmh: number): void;
bremsen?():void;
}
class Auto implement...
Interfaces, Klassen und Vererbung
var Tesla = (function (_super) {
__extends(Tesla, _super);
function Tesla() {
_super.app...
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/borisyanko...
Typdefinitionen erzeugen
Browser führt
JavaScript aus
TypeScript
Quellcode
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;...
Wichtigste Neuerung
in .Net 2.0 ?
Datentypen: Generics
export class Example extends Blume {
constructor(private list: Array<number>) {
}
add(val:number):voi...
Datentypen: Generics
export class GenericClass<T extends Example> {
constructor(private value: T) {
}
}
var data : Array<n...
Datentypen: Union Types
function f(x: number | number[]) {
if (typeof x === "number") {
return x + 10;
} else {
// return ...
Datentypen: Enums
enum Color {Red, Green, Yellow)
var mycolor = Color.Green;
var Color;
(function (Color) {
Color[Color["R...
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.wo...
„this“ und JavaScript
class Greeter{
//...
start() {
this.timerToken = setInterval(function () {
this.span.innerHTML = new...
„this“ und JavaScript
class Greeter{
//...
start() {
var _this = this;
this.timerToken = setInterval(function () {
_this.s...
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");...
Externe Module
 AMD oder CommonJS
 module nicht notwendig
 export genügt
//Datei fahrzeug.ts
export class ExpAuto{
cons...
Externe Module
//Datei fahrzeug.ts
class ExpAuto{
constructor (data:string){
}
}
export = ExpAuto;
import car=
require("fa...
Scopes
test() {
var x = 3;
this.addMsg("x:" + x.toLocaleString());
if (x === 3){
var x = 2;
this.addMsg("x (im IF):" + x.t...
Mehr Scopes dank Let
test() {
var x = 3;
this.addMsg("x:" + x.toLocaleString());
if (x === 3){
let x = 2;
this.addMsg("x (...
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...
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 (tei...
Vielen Dank
 http://www.typescript-lang.org
 http://blogs.msdn.com/b/typescript
Email: Tobias.Meier@bridging-it.de Twitt...
29. Treffen - Tobias Meier - TypeScript
29. Treffen - Tobias Meier - TypeScript
29. Treffen - Tobias Meier - TypeScript
29. Treffen - Tobias Meier - TypeScript
29. Treffen - Tobias Meier - TypeScript
29. Treffen - Tobias Meier - TypeScript
Nächste SlideShare
Wird geladen in …5
×

29. Treffen - Tobias Meier - TypeScript

830 Aufrufe

Veröffentlicht am

Vortrag: Tobias Meier (ca. 90 Minuten) - „TypeScript”

JavaScript, früher lediglich zur Anreicherung von Webseiten verwendet, dient inzwischen als Programmiersprache für umfangreiche Applikationen. Allerdings sind viele Entwickler nicht ganz glücklich mit der Sprache und vermissen Features wie statische Typprüfungen oder Vererbung.
Auch die großen Konzerne haben mit diesen “Herausforderungen” zu kämpfen. Im Oktober 2012 hat Anders Hejlsberg, (Mit-)Erfinder von Delphi und .Net, TypeScript vorgestellt. Bei TypeScript handelt es sich um ein Superset von JavaScript, welches dieses um Klassen, Module, Interfaces, Datentypen u.ä. ergänzt.
Inzwischen hat auch das AngularJS-Team bekanntgegeben dass sie zukünftig auf TypeScript aufsetzen.
Tobias Meier stellt die aktuelle Version von TypeScript vor und zeigt, wie TypeScript uns sowohl bei der Entwicklung von Singe Page Applications als auch herkömmlichen Webapplikationen unterstützt.
Tobias Meier ist Lead Softwarearchitekt Microsoft bei der BridgingIT GmbH und setzt TypeScript bereits seit der ersten verfügbaren Preview erfolgreich in Kundenprojekten ein.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
830
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
82
Aktionen
Geteilt
0
Downloads
25
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

29. Treffen - Tobias Meier - TypeScript

  1. 1. TypeScript Tobias Meier, BridgingIT GmbH Tobias.Meier@bridging-it.de @bITTobiasMeier
  2. 2. Tobias Meier Lead 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
  3. 3. Agenda  Bestandsaufnahme  Überblick TypeScript  Toolchain  Details
  4. 4. JavaScript
  5. 5. JavaScript  Intellisense  Typsicherheit  Compiler  Refactoring  …….
  6. 6.  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.)
  7. 7. TypeScript 0.8  Typsicherheit  Vererbung  Module  Compiler  Superset von JavaScript
  8. 8. http://www.typescriptlang.org/Playground
  9. 9. Datentypen: Number var zahl: number; var zahl2 = 33; zahl = 2; zahl = "abc"; //Implizit Datentyp number
  10. 10. Interfaces, Klassen und Vererbung interface 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
  11. 11. Interfaces, Klassen und Vererbung 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);
  12. 12. Casting var auto = <Auto>meinMercedes; var fahrzeug = <any> auto;
  13. 13. Declaration declare var $;
  14. 14. Typdefinitionen verwenden  Interfacedefinitionen  Sammlung für alle gängigen Bibliotheken: https://github.com/borisyankov/DefinitelyTyped  Über NuGet
  15. 15. Typdefinitionen erzeugen
  16. 16. Browser führt JavaScript aus TypeScript Quellcode SourceMap
  17. 17. Demo  Intellisense, Refactoring  Referenzieren, Typedefinitions  Konfigurationsmöglichkeiten  Debuggen
  18. 18. Alphaversion – trotzdem produktiv verwenden ?
  19. 19. Und im Notfall ?
  20. 20. Meine Toolchain  Visual Studio 2013, 2015  IE / Chrome  Web Essentials  TSLint  Resharper
  21. 21. Nur eine Javascript-Datei
  22. 22. Details  Properties  Datentypen  Lambda Expressions  Module
  23. 23. 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; } }
  24. 24. Wichtigste Neuerung in .Net 2.0 ?
  25. 25. 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
  26. 26. 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);
  27. 27. Datentypen: Union Types function f(x: number | number[]) { if (typeof x === "number") { return x + 10; } else { // return sum of numbers } }
  28. 28. 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 */;
  29. 29. Datentypen: Konstante Enums const enum Color {Red, Green, Yellow) var mycolor = Color.Green; var mycolor = 1 /* Green */;
  30. 30. Type Aliase type BoolArray = Array<boolean>; type NumberCallback = (zahl:number) => void;
  31. 31. instanceof class Dog { woof() { } } class Cat { meow() { } } var pet: Dog|Cat = /* ... */; if(pet instanceof Dog) { pet.woof(); } else { pet.woof(); }
  32. 32. „this“ und JavaScript class Greeter{ //... start() { this.timerToken = setInterval(function () { this.span.innerHTML = new Date().toUTCString(); } , 500); } }
  33. 33. „this“ und JavaScript class Greeter{ //... start() { var _this = this; this.timerToken = setInterval(function () { _this.span.innerHTML = new Date().toUTCString(); } , 500); } }
  34. 34. Lambda und „this“ start() { this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString() , 500); }
  35. 35. Interne Module module demo{ export class ExpAuto{ constructor (data:string){ } } } var auto1 = new demo.ExpAuto ("Tesla"); import MyAuto = demo.ExpAuto; var auto2 = new MyAuto()
  36. 36. 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");
  37. 37. Externe Module //Datei fahrzeug.ts class ExpAuto{ constructor (data:string){ } } export = ExpAuto; import car= require("fahrzeug"); var auto = new car("Tesla");
  38. 38. 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()); }
  39. 39. 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()); }
  40. 40. Demo EcmaScript 6 - Syntax Voraussetzung  Windows 10 Preview März  Visual Studio 2015 CTP 6
  41. 41. 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
  42. 42. Typescript 1.5 (Alpha)  Neue ES6-Features  Let/const werden auch nach ES5 kompiliert  Decorators  Sublime Text plugin
  43. 43. 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
  44. 44. Vielen Dank  http://www.typescript-lang.org  http://blogs.msdn.com/b/typescript Email: Tobias.Meier@bridging-it.de Twitter: @bITTobiasMeier

×