View
183
Download
0
Category
Preview:
Citation preview
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!
Recommended