Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Herzlich Willkommen!Gleich geht es los.

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TypeScript - Gut genug für große Anwendungen? Oder nur

Brückentechnologie für Ihr nächstes Projekt?

Treffpunkt „Semicolon“, 26.01.2016 Referent: Peter Hecker

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Peter Hecker

• Seit 1986: „Entwickler, Trainer“

• Seit 1995: „Web-Entwicklung“

• Seit 2009: „Mobile WebApps“

• @phecker65

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Themen

• TypeScript - Einstieg in TypeScript

• TypeScript und Anwendungen

• TypeScript - Fazit und Ausblick

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Einstieg in TypeScript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

The Problem with JavaScripthttps://dzone.com/articles/you-can-write-large-programs

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„TypeScript: JavaScript Development at Application Scale“

http://blogs.msdn.com/b/somasegar/archive/2012/10/01/typescript-javascript-development-at-application-scale.aspx

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„Anders Hejlsberg: Introducing TypeScript“

https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Angular 2: Built on TypeScripthttp://blogs.msdn.com/b/typescript/archive/2015/03/05/

angular-2-0-built-on-typescript.aspx

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

https://www.google.de/trends/explore#q=typescript%2C%20angular%20typescript%2C%20coffeescript%2C%20ES6&date=1%2F2012%2049m&cmpt=q&tz=Etc%2FGMT-1

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

http://githut.info/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

https://github.com/blog/2047-language-trends-on-github

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

„So what is the outlook for 2016? I expect that Java, PHP

(with the new 7 release), JavaScript and Swift will be the top 10 winners for 2016.

Scala might gain a permanent top 20 position, whereas Rust, Clojure, Julia and TypeScript

will also move up considerably in the chart.“

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

PLATTFORMEN

ECMAScript 5 (ES5) ECMAScript 6 / 2015 (ES6, ES2015)ECMAScript 3 (ES3) ECMAScript 7

(ES7)

STANDARDS

Transpiler: Traceur, Babel

CoffeeScript TypeScriptJavaScript ES6/ES7

SPRACHEN

TypeScript-Compiler

CoffeeScript-Compiler

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

function User(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName;}

User.prototype = { getId: function() { return this.id; }, getFirstName: function() { return this.firstName; }, getLastName: function() { return this.lastName; }, setFirstName: function(firstName) { this.firstName = firstName; }, setLastName: function(lastName) { this.lastName = lastName; }};

JavaScript (ES5)

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

class User constructor (@id, @firstName, @lastName) ->

getId: -> @id

getFirstName: -> @firstName

setFirstName: (@firstName) -> getLastName: -> @lastName

setLastName: (@lastName) ->

CoffeeScript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

class User { constructor(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName() { return this.firstName; } setFirstName(firstName) { this.firstName = firstName; } getLastName() { return this.lastName; } setLastName(lastName) { this.lastName = lastName; }}

ES6 / ES2015

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

class User { private id: number; private firstName: string; private lastName: string;

constructor(id: number, firstName: string, lastName: string) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName(): string { return this.firstName; } setFirstName(firstName: string) { this.firstName = firstName; } getLastName(): string { return this.lastName; } setLastName(lastName: string) : void { this.lastName = lastName; }}

TypeScript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„TypeScript lets you write JavaScript the way you really want to.“

http://www.typescriptlang.org/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Hauptmerkmale• Unterstützt Standard JavaScript Code (ES3, ES5, ES6)

• Bietet Statische Typisierung

• Kapselung durch Module und Klassen

• Unterstützt Konstruktoren, Eigenschaften, Funktionen

• Definition von Schnittstellen

• Lambdas oder Array-Funkionen

• Intellisense und Syntaxüberprüfung durch Werkzeuge

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TypeScript Syntax• TypeScript ist eine Obermenge von JavaScript

• TypeScript folgt den JavaScript-Syntax-Regeln:

• {} definieren Codeblöcke

• Semicolon beenden Ausdrücke

• Spezielle Schlüsselworte

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TypeScript-SchlüsselworteSchlüsselwort Beschreibung

class Container für Eigenschaften und Funktionenconstructor Initialisierung einer Klasse

exports Veröffentlicht einen Element extends Erweitert eine Klasse bzw. Schnittstelle

implements Implementiert eine Schnittstelleimports Importiert ein Modul

interface Definiert eine Schnittstelle module Container für Klassen und Code

public/private Sichtbarkeit von Elementen… Rest-Parameter=> Array-Syntax für Definitionen und Funktionen

<typeName> < > Konvertierung von Typen: Trennzeichen zwischen Variablen, Parameter, Typen

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Code-HierarchieModul

KlasseSchnittstelle

FelderKonstruktor

EigenschaftenFunktionen

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TypeScript - Werkzeuge

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TypeScript Compiler

hello.ts > tsc hello.ts hello.js

JavaScript

> npm i -g typescript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Werkzeuge

• IDE’s

• Visual Studio, Eclipse, Netbeans, WebStorm

• Editoren

• Visual Studio Code, Atom, Sublime

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Visual Studiohttps://www.visualstudio.com/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

VS Codehttps://code.visualstudio.com/

https://code.visualstudio.com/docs/languages/typescript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TypEcshttp://typecsdev.com/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Atomhttps://atom.io/

https://atom.io/packages/atom-typescript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Werkzeuge

• Develop

• TSLint

• TSD

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TSLinthttp://palantir.github.io/tslint/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

TSDhttp://definitelytyped.org/tsd/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

DefinitelyTypedhttp://definitelytyped.org/

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Werkzeuge

• Build

• tsc -watch *.ts (Poor Man’s Build)

• Grunt

• Gulp

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Grunthttp://gruntjs.com/

https://www.npmjs.com/package/grunt-ts https://www.npmjs.com/package/grunt-typescript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Gulphttp://gulpjs.com/

https://www.npmjs.com/package/gulp-tsc https://www.npmjs.com/package/gulp-typescript

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Demo…

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

!

"

„Server“-App

# $

!

!

„Web“-App

„Mobile“-App

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

„TypeScript PlayGround“http://www.typescriptlang.org/Playground

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Fazit

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Machen Sie TypeScript:• wenn Sie Java/C# lieben und JavaScript hassen

• wenn Sie gerne in einer IDE arbeiten wollen

• wenn Sie häufig in Ihrem JavaScript-Code „instanceOf“/„typeOf“ verwenden

• wenn Sie häufig Fehler aufgrund von fehlender Typenprüfung haben

• wenn Sie in Ihrem Team keine Konventionen haben

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Machen Sie ES6/ES2015

• wenn Sie JavaScript lieben

• wenn Sie keine Typenüberprüfung benötigen bzw. nutzen wollen

• wenn Sie Teil der größten Software-Entwickler-Community und nicht einer kleinen Teilmenge sein wollen

Alle

Rec

hte

liege

n be

i Pet

er H

ecke

r. Ver

viel

fälti

gung

ist

nich

t er

laub

t.

Das war’s!