Typsicheres
JavaScript

WHO AM I?
• Sebastian Springer
• aus München
• arbeite bei Mayflower
• https://github.com/sspringer82
• @basti_springer
• Consultant,Trainer,Autor

AtScript has been
replaced with TypeScript

Also machen wir jetzt
halt TypeScript

von

2012
XXX. Olympia
Curiosity
Gauck 11 Bundespräsident

Anders Hejlsberg
• Turbo Pascal
• Delphi
• C#
• TypeScript

Warum Typen in JavaScript?
Jürgen Treiber / pixelio.de

Weniger Fehler
In JavaScript darf man so ziemlich alles machen. Manchmal
will ich als Entwickler aber gar nicht alles machen können.

Dokumentation
Ein Entwickler kann mit Typen ausdrücken, was er an
Schnittstellen erwartet und was zurückgegeben wird.

Installation
berggeist007 / pixelio.de

npm install -g
typescript

console.log(‘Hello World’);
index.ts

tsc index.ts
Compiler mit verschiedenen Targets: ES3, ES5, ES6
tsc -v ES5 index.ts

console.log(‘Hello World’);
index.js

Typescript ist
JavaScript

Mit Codeanalyse zur
Compilezeit

var myString: string;
myString = 4;
console.log(myString);
tsc index.ts
test.ts(3,1): error TS2322: Type 'number' is
not assignable to type 'string'.
Das Script funktioniert aber trotzdem.

var myVar = 'Hello World';
myVar = function () {
return myVar;
};
console.log(myVar());
[Function]

var myVar: string = 'Hello World';
myVar = function () {
return myVar;
};
console.log(myVar());
test.ts(2,1): error TS2322: Type '() => string' is not assignable to
type 'string'.
test.ts(6,13): error TS2349: Cannot invoke an expression whose type
lacks a call signature.

Datentypen
Tim Reckmann / pixelio.de

Boolean
var myBool: boolean = true;

Number
var myNum: number = 1337;
var my2ndNum: number = 3.141;
Und nein, auch in Typescript haben wir keine Unterscheidung
zwischen Integer und Float.

String
var myStr: string = 'Hello';
Single Quotes, Double Quotes und Backticks sind erlaubt.

Array
var arr: number[] = [1, 2, 3];
var arr2: Array<number> = [1, 2, 3];
var arr: (string|number)[] = [];
arr.push(1);
arr.push('Hello');
Arrays mit verschiedenen Typen? Union Types!

Enum
Mengen von Ganzzahlen mit verständlichen Namen.
enum Food {Burger, Pizza, Schnitzel}
console.log(Food.Pizza); // 1
if (2 === Food.Schnitzel) { console.log('yummy!')} // yummy!

Any
Der Standardtyp, der alle anderen Typen beinhaltet. Erleichtert
den Umstieg von bestehendem JavaScript auf Typescript
erheblich.

Void
function sayHello(name: string): void {
console.log('Hello ' + name);
}
sayHello('Klaus');
Die Abwesenheit eines Wertes.

Funktionen
René Golembewski / pixelio.de

function add(a: number, b: number): number {
return a + b;
}
Parameterliste
Rückgabewert

function add(a: number, b: number): number {
return a + b;
}
add(1, 2);
add();
error TS2346: Supplied parameters do not match any signature of call
target.
add(1);
error TS2346: Supplied parameters do not match any signature of call
target.
add(1, 2, 3);
error TS2346: Supplied parameters do not match any signature of call
target.
add('Hello', 'World');
TS2345: Argument of type 'string' is not assignable to parameter of
type 'number'.

Type inference
oder: Das fröhliche Typen-Raten

var x = 3; // var x: number = 3;
function add(a: number, b: number) {
if (a % 2 === 0) {
return a + b;
}
return 'Hello';
}
TS2354: No best common type exists among return expressions.

Klassen
Manfred Jahreis / pixelio.de

class Rectangle {}
var rect: Rectangle;
rect = new Rectangle();
Klassendefinition
Instanziierung
Variablendeklaration

var Rectangle = (function () {
function Rectangle() {
}
Rectangle.prototype.getHeight = function () {
return this.height;
};
return Rectangle;
})();
Ein Beispiel für eine kompilierte Typescript-Klasse:

Eigenschaften

Eigenschaften
class Rectangle {
height: number = 20;
width: number = 20;
perimeter: number;
}
var rect: Rectangle;
rect = new Rectangle();

Methoden

Methoden
class Rectangle {
height: number = 20;
width: number = 20;
perimeter: number;
getPerimeter(): number {
if (this.perimeter) {
return this.perimeter;
}
this.perimeter = this.height * 2 + this.width * 2;
return this.perimeter;
}
}

Konstruktor

Konstruktor
class Rectangle {
height: number;
width: number;
constructor(height: number, width: number) {
this.height = height;
this.width = width;
}
}
var rect: Rectangle;
rect = new Rectangle(20, 40);

Konstruktor - Shortcut
class Rectangle {
constructor(public height: number, public width: number) {
}
}
var rect: Rectangle;
rect = new Rectangle(20, 40);

public, protected,
private?

Rike / pixelio.de

class Rectangle {
private perimeter: number;
constructor(public height: number, public width: number) {
this.height = height;
this.width = width;
}
getPerimeter(): number {
if (this.perimeter) {
return this.perimeter;
}
this.perimeter = this.height * 2 + this.width * 2;
return this.perimeter;
}
}
var rect: Rectangle;
rect = new Rectangle(20, 40);
console.log(rect.perimeter);
error TS2341: Property 'perimeter' is private
and only accessible within class 'Rectangle'.

Vererbung

class Square extends Rectangle {
constructor(side: number) {
super(side, side);
}
}
var square = new Square(20);
extends-Schlüsselwort
super für den Zugriff auf Parent

Static

class Square extends Rectangle {
constructor(side: number) {
super(side, side);
}
static getBiggerOne(a: Rectangle, b: Rectangle): Rectangle {
if (a.getPerimeter() >= b.getPerimeter()) {
return a;
} else {
return b;
}
}
}
var sq1 = new Square(15);
var sq2 = new Square(10);
console.log(Square.getBiggerOne(sq1, sq2));
funktioniert auch für Eigenschaften

Interfaces
Marc Boberach / pixelio.de

Interfaces
Definieren die Mindestanforderung an die Struktur eines
Typs. Interfaces können anonym oder benannt verwendet
werden und kommen sowohl für Klassen als auch Funktionen
zum Einsatz. Interfaces können andere Interfaces erweitern.

Interfaces
function greet(person: {name: string}): string {
return 'Hello ' + person.name;
}
var paul = {name: 'Paul', age: 42};
console.log(greet(paul));

Interfaces
interface Person {
name: string;
getName: () => string;
}
function greet(person: Person): string {
return 'Hello ' + person.getName();
}
var lisa = {name: 'Lisa', getName: function() {return this.name}};
console.log(greet(lisa));

Generics
Rüdiger Knappe / pixelio.de

Generics
Klassen und Interfaces, bei denen der Typ
noch nicht feststeht.

Generics
class Collection<T extends {id: number}> {
private items: T[] = [];
getItem(id: number): T {
return this.items.find((item) => {
return (item.id === id) ? item : null;
})
}
setItem(item: T) {
this.items.push(item);
}
}
class Person {
constructor(public id, public name) {}
}
var myColl = new Collection<Person>();
myColl.setItem(new Person(1, 'Mary'));
console.log(myColl.getItem(1));

Module
URSfoto / pixelio.de

Module
Namespacing für Applikationen, um Namenskonflikte zu
vermeiden. Definition von Abhängigkeiten im Quellcode. Zwei
Varianten von Modulen: interne und externe.

Interne Module
module Shapes {
export class Rectangle {
constructor(public height: number, public width: number) {}
}
}
var rect = new Shapes.Rectangle(15, 20);
console.log(rect);

Interne Module
tsc --out sample.js index.ts
index.ts
/// <reference path="shape.ts" />
var rect = new Shapes.Rectangle(15, 20);
console.log(rect);
module Shapes {
export class Rectangle {
constructor(public height: number, public width: number) {}
}
}
shape.ts

Externe Module
Können mit anderen Modulloadern wie require.js oder dem
Node.js-Modulsystem verwendet werden.
Externe Module benötigen mindestens ein Toplevel export
oder import.
Kommandozeilenoption —module für den Compiler.
Mögliche Werte sind commonjs (Node.js) und amd
(require.js).

Externe Module
import shape = require('shape');
var rect = new shape.Rectangle(30, 40);
console.log(rect);
index.ts
export class Rectangle {
constructor(public height: number, public width: number) {}
}
shape.ts
tsc --module commonjs index.ts

Weitere ES6 Features
gänseblümchen / pixelio.de

Weitere ES6 Features
• for..of
• Symbols
• Spread Operator
• let und const
• Template Strings

3rd Party Libraries

3rd Party Libraries
Headerdateien für 3rd Party Libraries wie jQuery oder
Angular, damit diese auch mit Typescript sinnvoll verwendet
werden können.

3rd Party Libraries
/// <reference path="jquery/jquery.d.ts" />
http://definitelytyped.org/

Fragen?
Rainer Sturm / pixelio.de

KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82