Typescript
-
Upload
sebastian-springer -
Category
Software
-
view
195 -
download
1
Transcript of Typescript
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 [email protected]
Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland
@basti_springer
https://github.com/sspringer82