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.
10. 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.)
15. 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
16. 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);
29. 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;
}
}
31. 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
32. 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);
33. Datentypen: Union Types
function f(x: number | number[]) {
if (typeof x === "number") {
return x + 10;
} else {
// return sum of numbers
}
}
34. 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 */;
37. instanceof
class Dog { woof() { } }
class Cat { meow() { } }
var pet: Dog|Cat = /* ... */;
if(pet instanceof Dog) {
pet.woof();
} else {
pet.woof();
}
38. „this“ und JavaScript
class Greeter{
//...
start() {
this.timerToken = setInterval(function () {
this.span.innerHTML = new Date().toUTCString();
}
, 500);
}
}
39. „this“ und JavaScript
class Greeter{
//...
start() {
var _this = this;
this.timerToken = setInterval(function () {
_this.span.innerHTML = new Date().toUTCString();
}
, 500);
}
}
40. Lambda und „this“
start() {
this.timerToken = setInterval(() =>
this.span.innerHTML = new Date().toUTCString()
, 500);
}
41. Interne Module
module demo{
export class ExpAuto{
constructor (data:string){
}
}
}
var auto1 =
new demo.ExpAuto ("Tesla");
import MyAuto = demo.ExpAuto;
var auto2 = new MyAuto()
42. 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");
43. Externe Module
//Datei fahrzeug.ts
class ExpAuto{
constructor (data:string){
}
}
export = ExpAuto;
import car=
require("fahrzeug");
var auto = new car("Tesla");
44. 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());
}
45. 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());
}
46. Demo
EcmaScript 6 - Syntax
Voraussetzung
Windows 10 Preview März
Visual Studio 2015 CTP 6
47. 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
48. Typescript 1.5 (Alpha)
Neue ES6-Features
Let/const werden auch
nach ES5 kompiliert
Decorators
Sublime Text plugin
49. 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