Acadevmy - TypeScript Overview

Software Factory Web Mobile DevOps Labs Formazione 2

google cloud platform Le tecnologie

Learning Factory Training Eventi Talks 4

Chi Sono? Developer per scelta e per passione, amante di nerdaggini di ogni tipo ed amante della condivisione del sapere! 5 . 1

TypeScript oh no, un altro xyzScript! 6

TypeScript Javascript che scala o semplicemente... JS con i types! 7

Breve Storia 2010 - Microsoft inizia lo sviluppo 2012 - Prima Release supportata da Visual Studio 2013 - Supporto ad altri IDE 2014 - TypeScript 1.0 2015 - AtScript viene implementato interamente in TypeScript 2017 - Standard de facto per un Javascript solido! 8

TypeScript è un superset di Javascript 9

Ricordiamo che... ...per usare ES6 (e successivi) è richiesto l'uso di transpiler/compiler: Babel, Traceur, Typescript compiler, ... Tabella di compatibilità 10

Transpiler TypeScript https://www.typescriptlang.org/ Babel https://babeljs.io/ 11

Javascript + Types JS + ES6/ES7/... + Types Compatibile con JS standard Genera codice JS standard Supporto OOP Implementazione Moduli Compile Time Errors Pensato per Applicazioni Scalabili Solid Development Experience Supporto dei Code Editor Supporto dei Tools (Webpack, Gulp, Grunt, etc...) Colma il GAP di Compatibilità e Produttività 12

...e se lo dice Anders Hejlsberg... 01:00:36 13

Strumenti di Lavoro Fondamentali npm tsc editor/IDE oppure usare per rapide proveTS Playground 14

Preparare un ambiente di sviluppo essenziale Installare Node (npm) Installare Pacchetti typescript/lite-server come dipendenze di sviluppo Configurazione package.json Configurazione tsconfig.json Creazione Progetto Base (index.html, app.ts) 15

Creazione di un Environment npm init --yes npm install --save-dev typescript lite-server tsc --init // Configura tsconfig ("outDir": "./dist") // Crea index.html // Crea app.ts // Configura package.json: (script: "start": "lite-server & tsc --watch") 16

Types In Typescript è possibile definire il tipo di variabili, parametri o valori di ritorno. 17 . 1

Staticamente tipizzati vs Dinamicamente tipizzati “Quando io vedo un uccello che cammina come un’anatra, nuota come un’anatra e starnazza come un’anatra, io chiamo quell’uccello 'anatra'”. Whitcomb Riley 17 . 2

Types Immediato Feedback in Sviluppo Autocomplete e Code-Suggestion contestualizzato Completamente Opzionale Configurazione tsconfig.json 17 . 3

Types Boolean Number String Array Tuple Enum Object Any Void Null/Undefined Never 17 . 4

Types Type assertion Inference Type compatibility Type Guard 17 . 5

Type definition let myName = "Francesco"; let otherName: string = "Aurelio"; let num: number = 2; //questo non verrà compilato! num = "test"; let arr: Array<number> = [1, 2, 3, 4]; let arr2: string[] = ["one", "two"]; 17 . 6

Type definition let addNumbers = (num1: number, num2: number): number => { return num1 + num2; }; let parseString : (input: string) => string; parseString = (input: string) => "un risultato qualunque"; //questo verrà compilato! addNumbers("2", 4); 17 . 7

Type definition //Tuples let tuple : [string, number]; tuple = ["devil", 666]; tuple[0]; tuple[1]; //enums enum Color {Red, Green, Blue}; let c: Color = Color.Red; if (c === Color.Red) { //farai qualcosa qui... } 17 . 8

Types (ES6) Scopes delle Variabili Destrutturazione Spread / Rest String Literal 17 . 9

Scope delle Variabili var foo; //functional scope let bar; //block scope const baz = "un valore"; //riferimento in sola lettura const value = 2; value = 1; //errato const obj = { name: "Aurelio" }; obj = {}; //errato obj.name = "Francesco"; //ok 17 . 10

Destrutturazione //Arrays e Tuples let [firsts, second, third] = [1, 2, 3]; console.log(firsts); // 1 console.log(second); // 2 console.log(third); // 3 //objects let {a, b} = { a: "test1", b: "test2" }; let { a: betterName1, b: betterName2 } = { a: "test1", b: "test2" }; //Spread / Rest let arr: number[] = [1, 2]; let concat = [...arr, 3, 4]; let [a, b, ...rest] = concat; 17 . 11

Template Literals //Template Literals let oldString = 'Una stringa'; let moderString = `Ancora una stringa`; let multilineString = `Questa invece è una stringa multilinea`; //Per i fan degli Iron Maiden let number = 666; let who = 'Beast'; let oldString = number + ' the number of the ' + who; let newString = `${number} the number of the ${who}`; 17 . 12

Definizione di Funzioni let fun = (param: number): string => { return "string"; }; //parametri opzionali let fun = (arg1: number, arg2?: number) => { //... } //rest let fun2 = (arg1: number, ...restOfArgs: number[]) => { //... }; //valore di default let fun2 = (arg1 = 0) => { // 17 . 13

Interfacce In Typescript sono i contratti, che ogni classe (e non solo) che implementa l'interfaccia deve soddisfare. 18 . 1

Interfacce Descrivono oggetti Definiscono contratto/protocollo Usate solo in fase di compilazione Molto Flessibili (proprietà dichiarate, opzionali, metodi, etc...) Ereditabili Molto simili alle interfacce Java/C# 18 . 2

Interfacce //Senza Intefaccia function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); //Con Intefaccia interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; i tL b l( Obj) 18 . 3

Interfacce per Oggetti interface User { name: string; surname: string; age?: number; } let me: User = { name: 'Francesco', surname: 'Sciuti', age: 30 // mi piacerebbe tanto }; //questa operazione non è consentita: me.something = 123; 18 . 4

Interfacce per Oggetti interface Point { readonly x: number; readonly y: number; } let p1: Point = { x: 10, y: 20 }; p1.x = 5; // errore! 18 . 5

Interfacce per Funzioni interface searchFunc { (query: string, source: string) : boolean } let mySearch : searchFunc = (q: string, s: string) => { return true; } 18 . 6

Classi Se ES6 introduce le classi in JS, TypeScript le rende migliori! 19 . 1

Classi Caratteristiche delle classi ES6 Sintassi e Leggibilità Migliorata Supporto ad Interfacce (Multiple) Modificatori d'Accesso (public, protected, private) Proprietà Statiche Overload di Metodi e Costruttori Ereditabili Classi Astratte 19 . 2

Classi //Classe class SayHi { toWho: string; constructor(toWho: string) { this.toWho= toWho; } hi() { return "Hello, " + this.toWho; } } let hi = new SayHi("Francesco"); 19 . 3

Proprietà class Person { static someStaticAttr = 2; private _id: number; constructor(public name: string, public secondName: string, public age: number) { } } 19 . 4

Getters and Setters class Person { //... get fullName():string { return `${this.name} ${this.secondName}`; } set fullName(value:string) { //some parsing probably this.name = valueOfName; this.secondName = valueOfSecondName; } } 19 . 5

Ereditarietà class Person { protected name: string; constructor(name: string) { this.name = name; } } class Employee extends Person { private department: string; constructor(name: string, department: string) { super(name); this.department = department; } public sayHi() { return `Ciao, mi chiamo ${this.name}, lavoro a ${this.department}.`; } } 19 . 6

Implementazione di Interfacce interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } } 19 . 7

Proprietà Statiche class Grid { static origin = {x: 0, y: 0}; calculateDistanceFromOrigin(point: {x: number; y: number;}) { let xDist = (point.x - Grid.origin.x); let yDist = (point.y - Grid.origin.y); return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale; } constructor (public scale: number) { } } let grid1 = new Grid(1.0); // 1x scale let grid2 = new Grid(5.0); // 5x scale console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10})); console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10})); 19 . 8

Classe come interfaccia class Point { x: number; y: number; } interface Point3d extends Point { z: number; } let point3d: Point3d = {x: 1, y: 2, z: 3}; 19 . 9

Modules TypeScript sfrutta un sistema modulare basato sui moduli di ES6! 20 . 1

Modules Sono eseguiti nel loro scope Possono esplicitamente rendere visibili verso l'esterno loro parti (come proprietà, funzioni, etc...) Sono dichiarative Utilizza un module loader come CommonJS o RequireJS Ogni file contenente esportazioni o importazioni è considerato un modulo (come in ES6) 20 . 2

Moduli //file: services.ts // ... export let addtwo = (number) => { number + 2 }; export class MyClass { hi: string; constructor() { this.hi = 'Hi'; } } export const evilNumber = 666; 20 . 3

Moduli // file: app.ts import * as services from "./services"; let inst = new services.MyClass(); let value = services.addtwo(services.evilNumber); 20 . 4

Moduli //Esportazioni possibili export let someValue = 2; export default class MyComponent() {} export { someValue, someOtherValue, andEvenSomeClass } export { someValue as betterName } 20 . 5

Moduli //Importazioni possibili import * as service from './service'; import { someValue, MyClass } from './service'; import { someValue as myLocalName } from './service'; import MyComponent from './my_component'; //solo se export default import './global_module'; // solo side-effects 20 . 6

...e se uso librerie esterne? Posso importarle normalmente. Typescript verificherà la dipendenza nella directory node_modules È necessario utilizzare i typings declaration files (.d.ts) che consentono di descrivere tipi, interfacce e classi per le librerie esistenti. npm supporta i typings con TS 2.0 npm install --save-dev @types/nome_libreria 20 . 7

Moduli //Moduli esterni // > npm install lodash // > npm install "@types/lodash" //Typescript verificherà la dipendenza nella directory node_modules import * as _ from 'lodash'; 20 . 8

Generics I componenti riutilizzabili grazie alla varietà di tipi con i quali possono lavorare! 21 . 1

Generics Consentono la costruzione di componenti riutilizzabili Possano lavorare su una varietà di tipi piuttosto che su uno singolo Generic Type Variables Generic Classes (e Interfaces) Generic Constraints 21 . 2

Generics //Funzione con un tipo definito let pickFirst = (list: number[]): number => { return list[0]; }; //Funzione con tipo any let pickFirst = (list: any[]): any => { return list[0]; }; 21 . 3

Generics //Funzione con generics let pickFirst = <T>(list: T[]): T => { return list[0]; }; // oppure function pickFirst<T>(list: T[]): T { return list[0]; } let res1: string = pickFirst<string>(['1', '2', '3']); let res2: number = pickFirst<number>([1, 2, 3, 4]); let res3: Date = pickFirst<Date>([ new Date(), new Date(), new Date() ]); 21 . 4

Generics class Movie { title: string; } function getAsync<T>(url: string): Promise<T[]> { return fetch(url) .then((response: Response) => response.json()); } getAsync<Movie>("/movies") .then(movies => { movies.forEach(movie => { console.log(movie.title); }); }); 21 . 5

Generics class Queue<T> { private data = []; push = (item: T) => this.data.push(item); pop = (): T => this.data.shift(); } const queue = new Queue<number>(); queue.push(0); queue.push("1"); // ERROR : non pushare una stringa ma solo un tipo numero! 21 . 6

Generics //Funzione con constraint interface Lengthwise { length: number; } function loggingIdentity<T extends Lengthwise>(arg: T): T { console.log(arg.length); // Ora sappiamo che ha la proprietà .length return arg; } 21 . 7

Generics // keyof Constraint function getProperty<T, K extends keyof T> (obj: T, key: K) { return obj[key]; } let x = { a: 1, b: 2, c: 3, d: 4 }; getProperty(x, "a"); // Ok getProperty(x, "m"); // error: l'argomento di tipo 'm' non è assegnabile! 21 . 8

Generics //Interfaccia interface Container<T> { value: T }; let cont: Container<string> = { value: 'test' }; //Classe class GenericCollection<T> { private store: T[]; add(value: T): void { this.store.push(value); } get(index: number): T { return this.store[index]; } } 21 . 9

Decorators Consentono la modifica di classi e membri attraverso semplici annotazioni! 22 . 1

Decorators Sono un tipo speciale di dichiarazione che può essere associata a classi, metodi, proprietà e parametri Utilizzano la forma @expression È possibile rendere parametrici i decorators per mezzo delle Decorator Factory Vengono chiamati quando la classe viene dichiarata, non quando un oggetto viene istanziato Decoratori multipli possono essere definiti sulla stessa classe / proprietà / metodo / parametro Non sono ammessi sui costruttori 22 . 2

Decoratori class MyClass { @log myMethod(arg: string) { return "Message -- " + arg; } } function log(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) { const originalMethod = descriptor.value; descriptor.value = function(...args: any[]) { console.log("args è: " + JSON.stringify(args)); const result = originalMethod.apply(this, args); console.log("Il valore tornato è: " + result); return result; }; return descriptor; } M Cl () M th d("t ti ") 22 . 3

Decoratori function logged(constructorFn: Function) { console.log(constructorFn); } @logged class Person { constructor() { console.log("Hi!"); } } // Factory function logging(value: boolean) { return function (target) { value ? logged : null; } } 22 . 4

Decoratori class Car { @capitalize modelloVettura(marca: string, modello: string) { return `${marca} - ${modello}`; } } // definizione funzione Decorator capitalize() function capitalize(target: any, propertyKey: string, descriptor: PropertyDes const oldFunction = descriptor.value; console.log('Decorator invocato in fase di definizione della classe') descriptor.value = function(...args: string[]) { const newArgs = args.map( arg => arg.charAt(0).toUpperCase() + arg.slice(1) ) 22 . 5

Decoratori function validate(target: any, propertyKey: string) { let value = target[propertyKey]; Object.defineProperty(target, propertyKey, { get: () => value, set: (newValue) => { const pattern = /^[A-Z]{2}s?[0-9]{3}s?[A-Z]{2}$/; if (pattern.test(newValue)) { value = newValue; } else { console.error('Formato targa non valido'); } } }) } class Car { @ lid t 22 . 6

Decoratori interface AutonomousCar { autoPilot: boolean | undefined; startAutoPilot(): void; stopAutoPilot(): void; } interface Constructor<T> { new(...args:any[]):T } function addFeature<T extends Constructor<Car>>(constructor:T) { return class extends constructor implements AutonomousCar { autoPilot: boolean | undefined; startAutoPilot(): void{ this.autoPilot = true; console.log('Autopilot ON'); } 22 . 7

Decoratori // Advanced function printable(constructorFn: Function) { constructorFn.prototype.print = function () { console.log(this); } } @logging(false) @printable class Plant { name = "Green Plant"; } const plant = new Plant(); (<any>plant).print(); 22 . 8

Decoratori // Method Decorator // Property Decorator function editable(value: boolean) { return function (target: any, propName: string, descriptor: PropertyDescr descriptor.writable = value; } } function overwritable(value: boolean) { return function (target: any, propName: string): any { const newDescriptor: PropertyDescriptor = { writable: value }; return newDescriptor; } } 22 . 9

Decoratori // Parameter Decorator function printInfo(target: any, methodName: string, paramIndex: number) { console.log("Target: ", target); console.log("methodName: ", methodName); console.log("paramIndex: ", paramIndex); } class Course { name: string; constructor(name: string) { this.name = name; } printStudentNumbers(mode: string, @printInfo printAll: boolean) { if (printAll) { l l (10000) 22 . 10

Qualche link utile https://www.typescriptlang.org/docs/home.html https://github.com/Microsoft/TypeScript/wiki/What's-new-in- TypeScript https://blogs.msdn.microsoft.com/typescript/ https://www.gitbook.com/book/basarat/typescript/details https://github.com/bitjson/typescript-starter 23

Acadevmy - TypeScript Overview

More Related Content

What's hot

Similar to Acadevmy - TypeScript Overview

More from Francesco Sciuti

Acadevmy - TypeScript Overview