Typescript zur Applikationsentwicklung nutzen. Hier werden die wichtigsten Features der Sprache kurz vorgestellt und am konkreten Beispiel deren Einsatz gezeigt.

1. Typsicheres
JavaScript

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

3. AtScript has been
replaced with TypeScript

4. Also machen wir jetzt
halt TypeScript

5. von

6. 2012
XXX. Olympia
Curiosity
Gauck 11 Bundespräsident

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

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

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

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

11. Installation
berggeist007 / pixelio.de

12. npm install -g
typescript

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

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

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

16. Typescript ist
JavaScript

17. Mit Codeanalyse zur
Compilezeit

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

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

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

21. Datentypen
Tim Reckmann / pixelio.de

22. Boolean
var myBool: boolean = true;

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

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

25. 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!

26. 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!

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

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

29. Funktionen
René Golembewski / pixelio.de

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

31. 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'.

32. Type inference
oder: Das fröhliche Typen-Raten

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

34. Klassen
Manfred Jahreis / pixelio.de

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

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

37. Eigenschaften

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

39. Methoden

40. 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;
}
}

41. Konstruktor

42. 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);

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

44. public, protected,
private?

45. Rike / pixelio.de

46. 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'.

47. Vererbung

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

49. Static

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

51. Interfaces
Marc Boberach / pixelio.de

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

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

54. 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));

55. Generics
Rüdiger Knappe / pixelio.de

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

57. 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));

58. Module
URSfoto / pixelio.de

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

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

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

62. 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).

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

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

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

66. 3rd Party Libraries

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

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

69. Fragen?
Rainer Sturm / pixelio.de

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