![Page 1: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/1.jpg)
TypeScript für Fortgeschrittene
Tobias Meier, BridgingIT GmbHhttp://blog.bridging-it.de/author/Tobias.Meier
![Page 2: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/2.jpg)
Tobias MeierLead Softwarearchitekt Microsoft
Wir bringen Dinge zusammen
Blog: http://blog.bridging-it.de/author/Tobias.Meier
Twitter: @bitTobiasMeier
Email: [email protected]
„
Standort Nürnberg
Königtorgraben 11
90402 Nürnberg
Standort Zug/Schweiz
Baarerstraße 14
CH-6300 Zug
Standort Mannheim
N7, 5-6
68161 Mannheim
Standort Karlsruhe
Rüppurrer Straße 4
76137 Karlsruhe
Standort Stuttgart
Marienstraße 17
70178 Stuttgart
Standort München
Riesstraße 12
80992 München
Standort Frankfurt
Solmsstraße 4
60486 Frankfurt
Standort Köln
Martinstraße 3
50667 Köln
Copyright © BridgingIT GmbH | Autor: Tobias Meier | Mai 2017 | www.bridging-it.de
![Page 3: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/3.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 4: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/4.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 5: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/5.jpg)
JavaScript
Intellisense
Typsicherheit
Compiler
Refactoring
…….
![Page 6: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/6.jpg)
Warum TypeScript ?
Great tooling enabled by static types
Features from the future today
![Page 7: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/7.jpg)
Wie verwendet ihr TypeScript ?
![Page 8: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/8.jpg)
VSCode
AutoImport
Debugger for Chrome, Edge
TSLint
Codelens, Code Metrics
Angular Language Service
![Page 9: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/9.jpg)
Tooling in VSCode
Quick Fixes
Autoimport
Codelens
Code Metrics
Angular Language Service
![Page 10: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/10.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 11: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/11.jpg)
Aufwärmübung
var conference = 'DevDays Magdeburg';
for (var i=2016; i< 2017; i++) {
var conference = 'Dev Days Magdeburg ' +i;
console.log (conference);
}
console.log (conference);
![Page 12: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/12.jpg)
Aufwärmübung 1
var conference = 'DevDays Magdeburg';
for (var i = 2016; i < 2017; i++) {
var conference = 'Dev Days Magdeburg ' + i;
console.log(conference);}console.log(conference);
![Page 13: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/13.jpg)
Aufwärmübung 2
let conference = 'DevDays Magdeburg';
for (var i = 2016; i < 2017; i++) {
let conference = 'Dev Days Magdeburg ' + i;
console.log(conference);}console.log(conference);
![Page 14: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/14.jpg)
Aufwärmübung 3
const conference = 'DevDays Magdeburg';
for (var i = 2016; i < 2017; i++) {
conference = 'Dev Days Magdeburg ' + i;
console.log(conference);
}
console.log(conference);
![Page 15: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/15.jpg)
Destructuring (1/4)
const sessions = ['IOT', 'TypeScript', 'Automatisieren']
const [session1, session2, session3] = sessions;
console.log(session1);
console.log(session2);
console.log(session3);
![Page 16: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/16.jpg)
Destructuring (2/4)
const sessions = ['IOT', 'TypeScript', 'Automatisieren']
const [session1, ...weitereSessions] = sessions;
console.log(session1);
console.log(weitereSessions.join());
![Page 17: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/17.jpg)
Destructuring (3/4)
const person = {
firstname: 'Tobias', surname: 'Tobias', plz: '70178', city: 'Stuttgart',
street: 'Marienstraße 17'
};
const { firstname, surname, ...address } = person;
console.log(firstname);console.log(surname);console.log(address.plz);console.log(address.city);console.log(address.street);
![Page 18: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/18.jpg)
Destructuring (4/4)
const person = {firstname: 'Tobias', surname: 'Tobias',plz: '70178', city:'Stuttgart', street:'Marienstraße 17'
};
const {firstname :vorname, surname:nachname,
...address: adresse} = person;
console.log (vorname);console.log (nachname);console.log(adresse.plz);console.log(adresse.city);console.log(adresse.street);
![Page 19: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/19.jpg)
Parameter: Optional, Default, Sonstige
function buildAddress(firstname: string,
surname?: string, ...address: string[]) {
let result = surname;
if (surname) result = result + ' ' + surname;
return result + address.join(' ');
}
console.log(buildAddress('Tobias', 'Meier','70178','Stuttgart', 'Marienstr. 17'));
![Page 20: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/20.jpg)
Klasse als Interface verwenden
class Person{
name: string;
}
interface OnlinePerson extends Person {
email: string;
}
const person: OnlinePerson = {name: 'Meier', email: '[email protected]'};
console.log (person.email);
![Page 21: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/21.jpg)
Spread
let original = { name: 'Tobias' };let address = { city: 'Stuttgart' };let copy = { ...original };let merged = { ...original, ...address };
let obj = { x: 1, y: "string" };var newObj = { ...obj, z: 3, y: 4 };
![Page 22: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/22.jpg)
Rest
let obj = { x: 1, y: 1, z: 1
};
let { z, ...obj1 } = obj;
console.log (obj1.x);
console.log (obj1.y);
![Page 23: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/23.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 24: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/24.jpg)
Null und undefined
function add (zahl1: number, zahl2: number | null):number{
return zahl1 + (zahl2 != null ? zahl2 : 0);}
var result = add (1,1); // => 2var result = add (1,null); // => 1
//Kompilierfehlervar result = add (null,1);
tsconfig.json
"compilerOptions": {"strictNullChecks": true
}
Nun auch in Angular verwendbar: Angular 4.1.2
![Page 25: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/25.jpg)
Intersection Types
interface Company { name: string}
interface Address { street: string, plz: string, city:string }
type CompanyWithAddress = Company & Address
const person : CompanyWithAddress = {
name: "BridgingIT GmbH",
plz: "70178",
city: "Stuttgart",
street: "Marienstraße 17"
} ;
![Page 26: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/26.jpg)
Datentypen: Union Types
function sum (x: number | number[]) { if (typeof x === "number") {
return x + 10; } else {
// return sum of numbers}
}
![Page 27: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/27.jpg)
Type Guard typeof
function format(obj: string | number): string {
if (typeof obj === 'number') {
return obj.toLocaleString();
}
return obj;
}
console.log( format("abc") );
console.log( format(10.124));
![Page 28: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/28.jpg)
Type Guard instanceof
class Person {constructor(public firstname: string, public lastname: string){}
}class Company { constructor(public companyname: string) { } }
function getName(obj: Person | Company): string {
if (obj instanceof Person) {
return obj.firstname + ' ' + obj.lastname;
}
return obj.companyname;
}
![Page 29: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/29.jpg)
Eigene Type Guards
function isPerson(obj: Person | Company): obj is Person {if (obj instanceof Person) {return true;
}return false;
}
var obj: Person | Company = new Company("BridingIT GmbH");if (isPerson(obj)) { console.info(obj.lastname); }else { console.info(obj.companyname); }
![Page 30: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/30.jpg)
Discriminated Union
interface Square {kind: "square";size: number;
}
interface Rectangle {kind: "rectangle";width: number;height: number;
}
interface Circle {kind: "circle";radius: number;
}
type Shape = Square | Rectangle | Circle;
function area(s: Shape) {
switch (s.kind) {
case "square": return s.size * s.size;
case "rectangle":
return s.width * s.height;
case "circle":
return Math.PI *s.radius * s.radius;
}
}
![Page 31: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/31.jpg)
Fluent API: Polymorphic this
class StringBuilder {
add (str: string) : this {
//…return this;
}}
class AdvancedStringBuilder extends StringBuilder {
appendLine () : this { return this;
}}
new AdvancedStringBuilder().add('Hello').appendLine();
![Page 32: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/32.jpg)
Mapped Types
class User {
firstname: string;
surname: string;
}
interface ReadonlyUser {
readonly firstname: string;
readonly surname: string;
}
const user = new User();
user.firstname = 'Tobias';
user.surname = 'Meier';
const ruser = <ReadonlyUser> user;
ruser.firstname = "tobias";
![Page 33: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/33.jpg)
Mapped Types: Readonly
class User {
firstname: string;
surname: string;
}
const user = new User();
user.firstname = 'Tobias'; user.surname = 'Meier';
const ruser = <Readonly<User>> user;
ruser.firstname = "tobias";
![Page 34: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/34.jpg)
Mapped Types: Partial
class User {
firstname: string;
surname: string;
}
const user : User = {firstname: 'Tobias'; }
const puser : <Partial<User>> = {firstname: 'Tobias'; }
![Page 35: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/35.jpg)
Und wie lautet der Zaubertrick ?
![Page 36: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/36.jpg)
Keyof-Operator
type Readonly<T> = {
readonly [P in keyof T]: T[P];
}
type Partial<T> = {
[P in keyof T]?: T[P];
}
![Page 37: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/37.jpg)
Mapped Types: Record
type Person =
Record<'firstname' | 'surname' | 'email', string>;
const person1 = <Person> {
firstname:"Tobias",
surname:"Meier",
email:"[email protected]"
};
![Page 38: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/38.jpg)
Mapped Types: Pick
type Person=Record<'firstname'|'surname'|'email',string>;
const P1 = <Person> {
firstname:"Tobias", surname:"Meier",
email:"[email protected]"
};
type OnlinePerson = Pick<Person, 'email'>;
const P2 = <OnlinePerson> P1;
console.log(P2.email);
![Page 39: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/39.jpg)
Keyof-Operator Record und Pick
type Record<K extends string | number, T> = {[P in K]: T;
}
type Pick<T, K extends keyof T> = {[P in K]: T[P];
}
![Page 40: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/40.jpg)
String Literal Types
type Direction= "north" | "south" | "west" | "east";function drive (dir: Direction) {//….}
drive ('north'); //okdrive ('east'); //ok
drive ('n'); //error
![Page 41: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/41.jpg)
Type Assertions
interface SquareConfig { color?: string; width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } { return null;
}
let mySquare = createSquare({ colour: "red", width: 100 } );
![Page 42: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/42.jpg)
Type Assertions
interface SquareConfig { color?: string; width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } { return null;
}
let mySquare = createSquare({ colour: "red", width: 100 } as SquareConfig
);
![Page 43: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/43.jpg)
Type Assertions
interface SquareConfig {
color?: string; width?: number;
[propName: string]: any;
}
function createSquare(config: SquareConfig): {
color: string; area: number } {
//..}
let mySquare = createSquare( { colour: "red", width: 100 });
![Page 44: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/44.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 45: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/45.jpg)
async / await
async function main() {
await ping();
}
async function ping() {
for (var i = 0; i < 10; i++) {
await delay(300); console.log("ping");
}
}
function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
main();
![Page 46: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/46.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 47: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/47.jpg)
Decorator
Entspricht Attributen in C#
Feature muss explizit aktiviert werden:
In Angular stark verwendet:
![Page 48: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/48.jpg)
Eigener Decorator (1/2)
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
![Page 49: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/49.jpg)
Eigener Decorator (2/2):function logger(): any {return function (target: any, propertyKey: string, descriptor:
PropertyDescriptor) {const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) {
console.log("Called method " + propertyKey +" (" + JSON.stringify(args) +")");const result = originalMethod.apply(this, args);console.log("Method " + propertyKey +" returns:" + result);return result;
};return descriptor;
}};
var sb = new StringBuilder();sb.add('Hallo').add(' Magdeburg');
![Page 50: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/50.jpg)
Mixins
class Person{
///...
}
export type Constructable = new (...args: any[]) => object;
export function Timestamped<BC extends Constructable>(Base: BC) {
return class extends Base {
timestamp = new Date();
};
}
const TimestampedPerson= Timestamped(Person);
const person1 = new TimestampedPerson();
console.info (person1.timestamp);
![Page 51: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/51.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 52: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/52.jpg)
Modulauflösung
Angelehnt an NodeJS
Tracing :
tsconfig.json
{"compilerOptions": {
"moduleResolution": "node","traceResolution": true}
}
![Page 53: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/53.jpg)
Modulauflösung (relativ)
File Main.ts:
File 'C:/Projekte/ET/ts/customer.ts' does not exist.File 'C:/Projekte/ET/ts/customer.tsx' does not exist.File 'C:/Projekte/ET/ts/customer.d.ts' does not exist.Directory 'C:/Projekte/ET/ts/customer' does not exist, skipping all lookups in it.Loading module as file / folder, candidate module location 'C:/Projekte/ET/ts/customer', target file type 'JavaScript'.File 'C:/Projekte/ET/ts/customer.js' does not exist.File 'C:/Projekte/ET/ts/customer.jsx' does not exist.Directory 'C:/Projekte/ET/ts/customer' does not exist, skipping all lookups in it.======== Module name './customer' was not resolved. ========
import {Cust} from './customer';
![Page 54: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/54.jpg)
Modulauflösung (absolut)
File Main.ts:
File 'C:/Projekte/ET/ts/node_modules/customer.ts' does not exist.File 'C:/Projekte/ET/ts/node_modules/customer.tsx' does not exist.File 'C:/Projekte/ET/ts/node_modules/customer.d.ts' does not exist.Directory 'C:/Projekte/ET/ts/node_modules/@types' does not exist, skipping all lookups in it.Directory 'C:/Projekte/ET/node_modules' does not exist, skipping all lookups in it.Directory 'C:/Projekte/node_modules' does not exist, skipping all lookups in it.Directory 'C:/node_modules' does not exist, skipping all lookups in it.Loading module 'customer' from 'node_modules' folder, target file type 'JavaScript'.File 'C:/Projekte/ET/ts/node_modules/customer.js' does not exist.File 'C:/Projekte/ET/ts/node_modules/customer.jsx' does not exist.Directory 'C:/Projekte/ET/node_modules' does not exist, skipping all lookups in it.Directory 'C:/Projekte/node_modules' does not exist, skipping all lookups in it.Directory 'C:/node_modules' does not exist, skipping all lookups in it.======== Module name 'customer' was not resolved. ========
import {Cust} from 'customer';
![Page 55: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/55.jpg)
![Page 56: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/56.jpg)
SystemJS: Textdateien importieren 1/2
System.config({
map: {
text:
'path/to/text.js'
}
});
import myText from './mytext.html!text';
![Page 57: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/57.jpg)
SystemJS: Textdateien importieren 1/2
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"module": "system",
"target": "es5",
"strictNullChecks": true,
"alwaysStrict": true
},
"exclude": [
"node_modules",
"jspm_packages",
"**/*.spec.ts"
]
}
package.json (Ausschnitt)
{
"jspm": {
"dependencies": {
"systemjs":
"npm:systemjs@^0.19.25",
"text":
"github:systemjs/plugin-text@^0.0.9"
},
"devDependencies": {
"jspm": "0.16.34"
}
}
![Page 58: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/58.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 59: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/59.jpg)
TSConfig – Meine Empfehlung
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitThis": false,
"strict": true
}
}
Erzeugbar über: tsc -init Seit TypeScript 2.3
![Page 60: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/60.jpg)
Agenda
Status quo, Editor Support
Advanced Variables, Interfaces and Classes
Advanced Types
Async / Await
Decorators und Mixins
Module Resolution
Projektsetup
Erste Hilfe
![Page 61: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/61.jpg)
VS-Code TypeScript-Version:
TypeScript-Version:tsc –v
Suchpfad überprüfenwhere tsc
![Page 62: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/62.jpg)
TypeScript wächst
![Page 63: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/63.jpg)
TypeScript für Fortgeschrittene
JavaScript that scales
Great tooling enabled by static types
Features from the future today
![Page 64: TypeScript für Fortgeschrittene - bridgingIT - Blogblog.bridging-it.de/.../2017.05-typescript-advanced.pdfErzeugbar über: tsc -init Seit TypeScript 2.3 Agenda Status quo, Editor](https://reader034.vdocuments.site/reader034/viewer/2022043017/5f39ad8bd4cb814bc94702a1/html5/thumbnails/64.jpg)
Vielen Dank
Blog: http://blog.bridging-it.de/author/Tobias.Meier
Email: [email protected]
Twitter: @bITTobiasMeier
Bilder: www.dreamstime.com