SlideShare ist ein Scribd-Unternehmen logo
1 von 70
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

OWF12/PAUG Conf Days Google tv part2 (commande and control) matt gaunt, a...
OWF12/PAUG Conf Days Google tv part2 (commande and control)     matt gaunt, a...OWF12/PAUG Conf Days Google tv part2 (commande and control)     matt gaunt, a...
OWF12/PAUG Conf Days Google tv part2 (commande and control) matt gaunt, a...
Paris Open Source Summit
 
BLK_DNM_MENS_SP_012816_DIGITAL
BLK_DNM_MENS_SP_012816_DIGITALBLK_DNM_MENS_SP_012816_DIGITAL
BLK_DNM_MENS_SP_012816_DIGITAL
Nathalie Saphier
 
Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...
Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...
Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...
switchingonthefuture
 
Problems In Education Today
Problems In Education TodayProblems In Education Today
Problems In Education Today
mrenz10
 
三八就是二三
三八就是二三三八就是二三
三八就是二三
lys167
 
Comets presentation
Comets presentationComets presentation
Comets presentation
helllena
 
03 25-13 treasurer's weekly briefing final
03 25-13 treasurer's weekly briefing final03 25-13 treasurer's weekly briefing final
03 25-13 treasurer's weekly briefing final
Dan Tran
 
Integrating technology into the teaching of ela
Integrating technology into the teaching of elaIntegrating technology into the teaching of ela
Integrating technology into the teaching of ela
hzick
 

Andere mochten auch (19)

OWF12/PAUG Conf Days Google tv part2 (commande and control) matt gaunt, a...
OWF12/PAUG Conf Days Google tv part2 (commande and control)     matt gaunt, a...OWF12/PAUG Conf Days Google tv part2 (commande and control)     matt gaunt, a...
OWF12/PAUG Conf Days Google tv part2 (commande and control) matt gaunt, a...
 
One loaf of bread
One loaf of breadOne loaf of bread
One loaf of bread
 
Media Question 6
Media Question 6Media Question 6
Media Question 6
 
BLK_DNM_MENS_SP_012816_DIGITAL
BLK_DNM_MENS_SP_012816_DIGITALBLK_DNM_MENS_SP_012816_DIGITAL
BLK_DNM_MENS_SP_012816_DIGITAL
 
Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...
Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...
Ives De Saeger - Creëer veerkracht en wendbaarheid in de huidige turbulente m...
 
Problems In Education Today
Problems In Education TodayProblems In Education Today
Problems In Education Today
 
Nancy Saia Portfolio
Nancy Saia PortfolioNancy Saia Portfolio
Nancy Saia Portfolio
 
Presentacion 1 Poo
Presentacion 1 PooPresentacion 1 Poo
Presentacion 1 Poo
 
Mexico
MexicoMexico
Mexico
 
Climate Change 2014: Impacts, Adaptation, and Vulnerability - SUMMARY FOR POL...
Climate Change 2014: Impacts, Adaptation, and Vulnerability - SUMMARY FOR POL...Climate Change 2014: Impacts, Adaptation, and Vulnerability - SUMMARY FOR POL...
Climate Change 2014: Impacts, Adaptation, and Vulnerability - SUMMARY FOR POL...
 
三八就是二三
三八就是二三三八就是二三
三八就是二三
 
Master MIBS - International Business for Small and Medium Enterprises - Preview
Master MIBS - International Business for Small and Medium Enterprises - PreviewMaster MIBS - International Business for Small and Medium Enterprises - Preview
Master MIBS - International Business for Small and Medium Enterprises - Preview
 
Tutor
TutorTutor
Tutor
 
Comets presentation
Comets presentationComets presentation
Comets presentation
 
SlidesDesigner's Portfolio
SlidesDesigner's PortfolioSlidesDesigner's Portfolio
SlidesDesigner's Portfolio
 
Journal le monde et suppl du jeudi 15 septembre 2016
Journal le monde et suppl du jeudi 15 septembre 2016Journal le monde et suppl du jeudi 15 septembre 2016
Journal le monde et suppl du jeudi 15 septembre 2016
 
Balancing Act
Balancing ActBalancing Act
Balancing Act
 
03 25-13 treasurer's weekly briefing final
03 25-13 treasurer's weekly briefing final03 25-13 treasurer's weekly briefing final
03 25-13 treasurer's weekly briefing final
 
Integrating technology into the teaching of ela
Integrating technology into the teaching of elaIntegrating technology into the teaching of ela
Integrating technology into the teaching of ela
 

Ähnlich wie Typescript

2005 - .NET SummerCamp: C# 2.0
2005 - .NET SummerCamp: C# 2.02005 - .NET SummerCamp: C# 2.0
2005 - .NET SummerCamp: C# 2.0
Daniel Fisher
 
Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)
GEEKcon
 

Ähnlich wie Typescript (20)

TypeScript
TypeScriptTypeScript
TypeScript
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
BASTA! 2017 Jubiläumskonferenz - Warum warten auf die IDE!?
 
ADC Core 2017 - Warum warten auf die IDE?
ADC Core 2017 - Warum warten auf die IDE?ADC Core 2017 - Warum warten auf die IDE?
ADC Core 2017 - Warum warten auf die IDE?
 
2005 - .NET SummerCamp: C# 2.0
2005 - .NET SummerCamp: C# 2.02005 - .NET SummerCamp: C# 2.0
2005 - .NET SummerCamp: C# 2.0
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
 
Magdeburger Developer Days 2018 - Warum warten auf die IDE?
Magdeburger Developer Days 2018 - Warum warten auf die IDE?Magdeburger Developer Days 2018 - Warum warten auf die IDE?
Magdeburger Developer Days 2018 - Warum warten auf die IDE?
 
#ADC 2016 - C# Script in Action
#ADC 2016 - C# Script in Action#ADC 2016 - C# Script in Action
#ADC 2016 - C# Script in Action
 
BASTA! Spring 2017 - C# Script in Action
BASTA! Spring 2017 - C# Script in ActionBASTA! Spring 2017 - C# Script in Action
BASTA! Spring 2017 - C# Script in Action
 
Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeSOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
 
JAX 2023 - Generics in Go
JAX 2023 - Generics in GoJAX 2023 - Generics in Go
JAX 2023 - Generics in Go
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Codesmells
CodesmellsCodesmells
Codesmells
 
C# 8.0, vNow and vNext
C# 8.0, vNow and vNextC# 8.0, vNow and vNext
C# 8.0, vNow and vNext
 
FMK2014: FileMaker Plugin erzeugen by Christian Schmitz
FMK2014: FileMaker Plugin erzeugen by Christian SchmitzFMK2014: FileMaker Plugin erzeugen by Christian Schmitz
FMK2014: FileMaker Plugin erzeugen by Christian Schmitz
 
Battle of the Languages: Java und Python im Wettstreit beim Lösen von Program...
Battle of the Languages: Java und Python im Wettstreit beim Lösen von Program...Battle of the Languages: Java und Python im Wettstreit beim Lösen von Program...
Battle of the Languages: Java und Python im Wettstreit beim Lösen von Program...
 

Mehr von Sebastian Springer

Mehr von Sebastian Springer (20)

Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Angular2
Angular2Angular2
Angular2
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
Node.js
Node.jsNode.js
Node.js
 

Typescript