TypeScript für Fortgeschrittene

Transcription

1 TypeScript für Fortgeschrittene Tobias Meier, BridgingIT GmbH

2 Tobias Meier Lead Softwarearchitekt Microsoft Blog: Wir bringen Dinge zusammen Standort Frankfurt Solmsstraße Frankfurt Standort Mannheim N7, Mannheim Standort Stuttgart Marienstraße Stuttgart Standort Nürnberg Königtorgraben Nürnberg Standort Köln Martinstraße Köln Standort Karlsruhe Rüppurrer Straße Karlsruhe Standort München Riesstraße München Standort Zug/Schweiz Baarerstraße 14 CH-6300 Zug Copyright BridgingIT GmbH Autor: Tobias Meier Mai

3 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

4 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

5 JavaScript Intellisense Typsicherheit Compiler Refactoring.

6 Warum TypeScript? Great tooling enabled by static types Features from the future today

7 Wie verwendet ihr TypeScript?

8 VSCode AutoImport Debugger for Chrome, Edge TSLint Codelens, Code Metrics Angular Language Service

9 Tooling in VSCode Quick Fixes Autoimport Codelens Code Metrics Angular Language Service

10 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

11 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);

12 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);

13 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);

14 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);

15 Destructuring (1/4) const sessions = ['IOT', 'TypeScript', 'Automatisieren'] const [session1, session2, session3] = sessions; console.log(session1); console.log(session2); console.log(session3);

16 Destructuring (2/4) const sessions = ['IOT', 'TypeScript', 'Automatisieren'] const [session1,...weiteresessions] = sessions; console.log(session1); console.log(weiteresessions.join());

17 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);

18 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);

19 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'));

20 Klasse als Interface verwenden class Person{ name: string; interface OnlinePerson extends Person { string; const person: OnlinePerson = {name: 'Meier', 'tobias.meier@bridging-it.de'; console.log (person. );

21 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 ;

22 Rest let obj = { x: 1, y: 1, z: 1 ; let { z,...obj1 = obj; console.log (obj1.x); console.log (obj1.y);

23 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

24 Null und undefined function add (zahl1: number, zahl2: number null):number { return zahl1 + (zahl2!= null? zahl2 : 0); tsconfig.json "compileroptions": { "strictnullchecks": true var result = add (1,1); // => 2 var result = add (1,null); // => 1 Nun auch in Angular verwendbar: Angular //Kompilierfehler var result = add (null,1);

25 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" ;

26 Datentypen: Union Types function sum (x: number number[]) { if (typeof x === "number") { return x + 10; else { // return sum of numbers

27 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));

28 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;

29 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);

30 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;

31 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();

32 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";

33 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";

34 Mapped Types: Partial class User { firstname: string; surname: string; const user : User = {firstname: 'Tobias'; const puser : <Partial<User>> = {firstname: 'Tobias';

35 Und wie lautet der Zaubertrick?

36 Keyof-Operator type Readonly<T> = { readonly [P in keyof T]: T[P]; type Partial<T> = { [P in keyof T]?: T[P];

37 Mapped Types: Record type Person = Record<'firstname' 'surname' ' ', string>; const person1 = <Person> { firstname:"tobias", surname:"meier", "tobias.meier@bridging-it.de" ;

38 Mapped Types: Pick type Person=Record<'firstname' 'surname' ' ',string>; const P1 = <Person> { firstname:"tobias", surname:"meier", "tobias.meier@bridging-it.de" ; type OnlinePerson = Pick<Person, ' '>; const P2 = <OnlinePerson> P1; console.log(p2. );

39 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];

40 String Literal Types type Direction= "north" "south" "west" "east"; function drive (dir: Direction) { //. drive ('north'); //ok drive ('east'); //ok drive ('n'); //error

41 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 );

42 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 );

43 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 );

44 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

45 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();

46 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

47 Decorator Entspricht Attributen in C# Feature muss explizit aktiviert werden: In Angular stark verwendet:

48 Eigener Decorator (1/2) function sealed(constructor: Function) { Object.seal(constructor); Object.seal(constructor.prototype);

49 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');

50 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);

51 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

52 Modulauflösung Angelehnt an NodeJS Tracing : tsconfig.json { "compileroptions": { "moduleresolution": "node", "traceresolution": true

53 Modulauflösung (relativ) File Main.ts: import {Cust from './customer'; 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. ========

54 Modulauflösung (absolut) File Main.ts: import {Cust from 'customer'; 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 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. ========

55

56 SystemJS: Textdateien importieren 1/2 System.config({ map: { text: 'path/to/text.js' ); import mytext from './mytext.html!text';

57 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@^ ", "text": "github:systemjs/plugin-text@^0.0.9", "devdependencies": { "jspm": " "

58 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

59 TSConfig Meine Empfehlung { "compileroptions": { "target": "es5", "module": "commonjs", "noimplicitthis": false, "strict": true Erzeugbar über: tsc -init Seit TypeScript 2.3

60 Agenda Status quo, Editor Support Advanced Variables, Interfaces and Classes Advanced Types Async / Await Decorators und Mixins Module Resolution Projektsetup Erste Hilfe

61 VS-Code TypeScript-Version: TypeScript-Version: tsc v Suchpfad überprüfen where tsc

62 TypeScript wächst

63 TypeScript für Fortgeschrittene JavaScript that scales Great tooling enabled by static types Features from the future today

64 Vielen Dank Blog: Bilder: