Einführung in TypeScript

TypeScript
Lukas Gamper
Demian Holderegger
uSystems GmbH

Agenda
TypeScript: Die Sprache
TypeScript in der Praxis

Wie ist TypeScript
entstanden?
- 2011 Entwicklung von ES6 beginnt
- 2012 Microsoft entwickelt TypeScript
- 2015 Angular2 mit TypeScript

Was ist TypeScript?
- Kompiliert nach JavaScript
- Generiert lesbaren JS Code

Was ist TypeScript?
- Superset von ES6
- Unterstützt Typen

Vorteile von Typescipt
- Keine Typenfehler mit Strong Typing
- ES6 kann schon jetzt benutzt werden:
- Besser strukturiert mit Klassen
- Viele Sprachverbesserungen wie
let, for … of, ()=>..., etc.

- Boolean, Number, String
- Array, Tuple
- Enum
- Function
- Object
- Void
- Any
Statische Typen

var isDone: boolean = false;
Boolean

var height: number = 6;
Number

var name: string = "bob";
name = 'smith';
String

var list:number[] = [1, 2, 3];
var list:Array<number> = [1, 2, 3];
Array

var tuple:[number, string]
= [1, "bob"];
var secondElement:string
= tuple[1];
Tuple

enum Color {Red, Green, Blue=4};
var c: Color = Color.Green;
Enum

var cb:(name:string):string =
function(name:string):string {
return ‘Hello ’ + Bob;
}
console.log(cb(‘Bob’)) // Hello Bob
Function

var square:{color:string; area:number}
= {color: white, area: 100}
Object

function warnUser(): void {
alert("This is my warning message");
}
Void

var notSure: any = 4;
var unknown = ‘foo’;
Any

Klassen
TypeScript
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet(): string {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");
JavaScript
function Greeter(message) {
}
Greeter.prototype.greet = function() {
}

Private / Public
class Greeter {
private greeting: string;
constructor(message: string) {
}
greet() {
}
}
class Greeter {
constructor(private greeting: string) {}
greet() {
}
}

class Animal {
constructor(public name: string) {}
move(meters: number = 0):void {
alert( this.name + ": " + meters);
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
alert("Slithering...");
super.move(meters);
}
}
Vererbung
class Horse extends Animal {
constructor(name: string) {
super(name);
}
alert("Galloping...");
super.move(meters);
}
}

Interfaces
interface AnimalInterface {
name:string;
constructor(theName: string);
move(meters: number) ;
}
interface ReptileInterface {}
interface SnakeInterface
extends AnimalInterface, R eptileIn
{
constructor(name: string)
move(meters: number);
}
class Animal implements AnimalInterface {
constructor(public name: string) {}
move(meters: number = 0) {
alert( this.name + " moved " +
meters + "m.");
}
}
class Snake extends Animal implements
SnakeInterface, R eptileInterface {
constructor(name: string) { super
(name); }
move(meters: number = 5) {
alert("Slithering...");
super.move(meters);
}
}

Arrow Functions ()=>...
- kein function keyword
- kein Scope
- this von outer scope vererbt
- arguments bleibt unverändert
- bind hat keine Wikrung

mit brackets
var inc = (arg: number):number => {
return a + 1
}
ohne brackets
var inc = (a)=>a+1
JavaScript
var inc = function(arg:number):number {
return a + 1
}

JavaScript
function Person(age) {
this.age = age
this.growOld = (function(){
++this.age;
}).bind(this);
}
let person = new Person(1);
person.growOld()
TypeScript
function Person(age) {
this.age = age
this.growOld = ():void=>{
++this.age;
}
}
let person = new Person(1);
person.growOld()

let
▪ Variablen in ES5 sind function scoped
▪ Let definiert block scoped Variablen
▪ Zugriff auf let Variablen vor ihrer
definition wirft ReferenceError

let
JavaScript
var foo = 123;
if (true) {
var foo = 456;
}
console.log(foo); // 456
TypeScript
let foo = 123;
if (true) {
let foo = 456;
}
console.log(foo); // 123

let
JavaScript
var vals = [];
for (var x = 0; x < 4; ++x)
vals.push(()=>x);
console.log(vals.map(cb=>cb()));
// [4, 4, 4, 4]
typeScript
let vals = [];
for (let x = 0; x < 4; ++x)
vals.push(()=>x);
console.log(vals.map(cb=>cb()));
// [0, 1, 2, 3]

String Templates - Multiline String
JavaScript
var lyrics = "Never gonna give you up
nNever gonna let you down";
TypeScript
var lyrics = `Never gonna give you up
Never gonna let you down`;

String Templates - String Interpolation
JavaScript
var lyrics = 'Never gonna give you up';
var a = '<div>' + lyrics + '</div>';
var b = ‘1 and 1 one make ' + (1 + 1)
TypeScript
var lyrics = 'Never gonna give you up';
var a = `<div>${lyrics}</div>`;
var b = `1 and 1 one make ${1 + 1}`

for … of
var someArray = [9, 2, 5];
for (var item in someArray) {
console.log(item); // 0,1,2
}
var someArray = [9, 2, 5];
for (var item of someArray) {
console.log(item); // 9,2,5
}

/// <reference path="vue-component.ts" />
@createComponent('demo-grid')
class DemoGrid extends ComponentBase {
static template:string = '#grid-template';
@prop({ type: Array, required: true })
data:Array<{name: string, power:number }>;
columns:Array< string>;
sortKey:string = '';
reversed:{[key: string]: boolean} = {};
@hook('compiled')
compiled(): void {
this.columns.forEach((key: string):void => {
this.$set(`reversed.${key}`, false);
});
}
sortBy(key: string):void {
this.sortKey = key;
this.reversed[key] = ! this.reversed[key];
}
}
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: {type:Array, required: true},
columns: {type:Array, required:
true}
},
data: function () {
return {
data: null,
columns: null,
sortKey: '',
rev: {}
};
},
compiled: function () {
var self = this;
this.columns.forEach( function (key)
{
self.$set(rev.' + key, false);
});
},
methods: {
sortBy: function (key) {
this.sortKey = key;
this.rev[key] = ! this.rev[key];
}
}
});

@hook('compiled')
compiled(): void {
});
}
this.sortKey = key;
}
}
props: {
true}
},
data: function () {
return {
data: null,
columns: null,
sortKey: '',
rev: {}
};
},
var self = this;
{
});
},
methods: {
this.sortKey = key;
}
}
});
Decorators / Annotations

@hook('compiled')
compiled(): void {
});
}
this.sortKey = key;
}
}
props: {
true}
},
data: function () {
return {
data: null,
columns: null,
sortKey: '',
rev: {}
};
},
var self = this;
{
});
},
methods: {
this.sortKey = key;
}
}
});
Klassen und Typen

@hook('compiled')
compiled(): void {
});
}
this.sortKey = key;
}
}
props: {
true}
},
data: function () {
return {
data: null,
columns: null,
sortKey: '',
rev: {}
};
},
var self = this;
{
});
},
methods: {
this.sortKey = key;
}
}
});
Arrow Functions

@hook('compiled')
compiled(): void {
});
}
this.sortKey = key;
}
}
props: {
true}
},
data: function () {
return {
data: null,
columns: null,
sortKey: '',
rev: {}
};
},
var self = this;
{
});
},
methods: {
this.sortKey = key;
}
}
});
String Template

Native Unterstützung in
PHPStorm 9
Native Unterstützung in PhpStorm 9

Debugging
Debugging im Chrome
Breakpoints
source map files

Einbinden in bestehenden
Code
JavaScript ist TypeScript!

DefinitelyTyped
Interface Dateien für bestehende Libraries
http://definitelytyped.org/

DefinitelyTyped
▪ GitHub Repo mit über 1000 *.d.ts
Dateien von bekannten Libraries
▪ Einfach selber zu schreiben: es sind
nur Interfaces

DefinitelyTyped
Beispiel: jQuery
$(“.myclass”); // Liste der Elemente
declare var $: JQuery;
interface JQuery {
(selector: string): JQueryObject;
...
}

DefinitelyTyped
Beispiel: AngularJS $http Service
interface IHttpService {
post<T>(
url: string,
data: any,
config?: IRequestShortcutConfig
): IHttpPromise<T>;
...
}

DefinitelyTyped
Yet Another Package Manager: tsd
▪ ähnlich wie Bower
▪ erstellt Reference Datei mit allen
includes
▪ Manifest Datei: tsd.json

Testing
▪ Grundsätzlich gleich wie mit
JavaScript
▪ Tests in TypeScript schreiben (.d.ts)
▪ tsUnit

Ausblick
- generators (1.6)
- await / async (2.0)

Pro
▪ weniger Fehler
▪ schönerer Code
▪ schnellere Entwicklung
▪ Modularisierung

Cons
▪ .d.ts Dateien teilweise veraltet
▪ Dokumentation nicht up to date
▪ Muss immer kompiliert werden

function *g(limit) {
for (var i = 0; i < limit; i++) {
yield i;
}
}
for (let i of g(100)) {
console.log(i);
}
var array = [...g(50)];
var [first, second, ...rest] = g(100);
Backup: generators

async myFunction(): Promise<any> {
var result = await loadAjaxData();
return result;
}
Backup: await / async

function foo(x) {
while (true) {
x = x * 2;
yield x;
}
}
var g = foo(2);
g.next(); // -> 4
g.next(); // -> 8
g.next(); // -> 16
Backup: yield

Ressourcen
Offizielle Seite:
www.typescriptlang.org
Offizielle Referenz:
www.typescriptlang.org/Handbook
Gibbook
basarat.gitbooks.io/typescript/content/

Einführung in TypeScript

More Related Content

What's hot (20)

Similar to Einführung in TypeScript (10)

Recently uploaded (20)

Einführung in TypeScript