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

2012XXX. OlympiaCuriosity

Gauck 11 Bundespräsident

Anders Hejlsberg

• Turbo Pascal

• Delphi

• C#

• TypeScript

Warum Typen in JavaScript?

Jürgen Treiber / pixelio.de

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

DokumentationEin 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.tsCompiler 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); // 1if (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 inferenceoder: 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

Methodenclass 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.

Genericsclass 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 Moduleimport 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