Introduzione ad ECMAScript 6 (ES6) e TypeScript

in collaborazione conES6 & TypeScript COS'È TYPESCRIPT? 2

in collaborazione conES6 & TypeScript TypeScript è un super-set di JavaScript, OpenSource, realizzato e mantenuto da Microsoft. Estende la sintassi di JavaScript, rendendo la sua adozione più immediata e veloce. 3

in collaborazione conES6 & TypeScript PERCHÉ TYPESCRIPT? 4

in collaborazione conES6 & TypeScript ✴TypeScript è stato ideato per realizzare Web Applications su larga scala, in modo da rendere più facile il mantenimento del codice; ✴La pre-compilazione e i costrutti introdotti da TypeScript rendono il codice più espressivo, riducendo il numero degli errori in fase di stesura; ✴Permette già da subito di utilizzare buona parte delle novità introdotte con ES6 senza sacriﬁcare il supporto a browser più datati. 5

in collaborazione conES6 & TypeScript ✴TypeScript è completamente slegato da Angular. Anche se è possibile scrivere un'applicazione Angular utilizzando JavaScript, il framework stesso è scritto in TypeScript. Inoltre, la complessità di Angular rende TypeScript una tecnologia quasi necessaria. ✴Essendo slegato da qualsiasi contesto, è possibile utilizzare TypeScript per qualsiasi progetto JavaScript (e consiglio di farlo). 6

in collaborazione conES6 & TypeScript PRINCIPALI VANTAGGI 7

in collaborazione conES6 & TypeScript ✴TypeScript previene gli errori a compile-time; ✴Introducendo i tipi, permette di avere più controllo, rendendo il codice autoesplicativo e mantenibile prevenendo, di nuovo, gli errori; ✴Tutto il codice ES6 può venir convertito in codice ES5 al momento della compilazione in modo trasparente e sicuro. 8

in collaborazione conES6 & TypeScript this class let const () => { } map forEach (a = 10) { } […params] `Awesome string ${interpolation}`{ x, y } export import extends Symbol Typed Arrays Promise ES6 (…b) { } 9

1. LISTA DELLA SPESA in collaborazione conES6 & TypeScript 10

in collaborazione conES6 & TypeScript WebStorm https://www.jetbrains.com/webstorm/ 11

in collaborazione conES6 & TypeScript Visual Studio  Code https://code.visualstudio.com/ 12 ...consiglio però vivamente WebStorm!!!

Introduzione ad ES6 Le principali novità

in collaborazione conES6 & TypeScript Molte delle novità introdotte con ES6 sono delle shortcuts rispetto ad ES5, andando a sempliﬁcare il lavoro degli sviluppatori. Per maggiori informazioni  http://es6-features.org/ 14

1. VARIABILI in collaborazione conES6 & TypeScript 15

in collaborazione conES6 & TypeScript Assieme a var, è stata creata let, variabile di tipo block-scoped. 16 var a = 1; var b = 2; if(a > b){ let c = 3; } console.log(c); // ReferenceError

in collaborazione conES6 & TypeScript È stato introdotto anche l'uso delle costanti con const 17 const PI = 3.14; console.log(PI); // 3.14 PI = 2; // invalid assignment to const 'PI'

2. FUNZIONI in collaborazione conES6 & TypeScript 18

in collaborazione conES6 & TypeScript Vengono introdotte le Arrow Functions, un modo per deﬁnire una funzione in modo più semplice. Grazie a questo costrutto viene anche risolto il problema di this all'interno degli oggetti. 19

in collaborazione conES6 & TypeScript 20 var log = function(msg) { console.log(msg); } var log = msg => console.log(msg);

in collaborazione conES6 & TypeScript 21 var c = { name: 'Pippo', greet: function(){ var setName = (newName) => this.name = newName; setName('Pluto'); } }

in collaborazione conES6 & TypeScript Grazie ai default parameters, è possibile valorizzare un parametro in ingresso di una funzione senza la necessità di deﬁnirlo al momento dell'utilizzo della funzione stessa. 22

in collaborazione conES6 & TypeScript 23 var log = function(msg = 'This is a message') { console.log(msg); } log();

in collaborazione conES6 & TypeScript È possibile passare n parametri in ingresso ad una funzione grazie allo spread operator. 24

in collaborazione conES6 & TypeScript 25 var log = function(msg, ...other) { const otherString = other.join(' '); console.log(msg + ' ' + otherString); } log('This is a message', 'a', 'b', 3);

3. STRINGHE in collaborazione conES6 & TypeScript 26

in collaborazione conES6 & TypeScript Grazie a string interpolation, è possibile formattare una stringa, senza ricorrere alla concatenazione classica, utilizzando il simbolo `` (back-tick). Vengono mantenuti anche spazi, tabulazioni e a capo. 27

in collaborazione conES6 & TypeScript 28 let a = 'This is'; let b = 'a message.'; console.log(`${a} ${b}`); let a = 'This is'; let b = 'a message.'; console.log(` ${a} ${b} `);

4. ARRAY in collaborazione conES6 & TypeScript 29

in collaborazione conES6 & TypeScript È possibile concatenare più array grazie allo spread operator. 30

in collaborazione conES6 & TypeScript 31 let a = [1, 2, 3]; let b = [4, 5, 6]; console.log([...a, ...b]); console.log([...b, ...a]);

in collaborazione conES6 & TypeScript Grazie al destructuring è possibile mappare, valore per valore, gli elementi di un array*. 32 * utilizzabile anche su oggetti.

in collaborazione conES6 & TypeScript 33 const a = ['Pippo', 'Pluto']; let [firstname, lastname] = a; console.log(firstname); console.log(lastname);

in collaborazione conES6 & TypeScript 34 const a = ['Pippo', 'Pluto', 'Paperino']; let [firstname, , lastname] = a; console.log(firstname); console.log(lastname);

5. CLASSI in collaborazione conES6 & TypeScript 35

in collaborazione conES6 & TypeScript Le classi in ES6 rappresentano un modo veloce per utilizzare le funzioni come function constructor. 36

in collaborazione conES6 & TypeScript 37 class Person = { constructor(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } sayHi(){ return `Hi ${this.firstName}`; } } var pippo = new Person(‘Pippo’, ‘Pluto’); console.log(pippo.sayHi());

in collaborazione conES6 & TypeScript 38 var Person = (function () { function Person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } Person.prototype.sayHi = function () { return "Hi " + this.firstname + "!"; }; return Person; }()); var pippo = new Person(‘Pippo’, ‘Pluto’); console.log(pippo.sayHi());

in collaborazione conES6 & TypeScript Per avere maggiore controllo sulle proprietà della classe, è possibile implementare getter e setter. 39

in collaborazione conES6 & TypeScript 40 class Person = { constructor(firstName, lastName){ this._firstname = firstname; } get firstname() { return this._firstname; } set firstname(value) { if (this._firstname.length === 0) { this._firstname = value; } else { console.log('You cannot change the name!'); } } } var pippo = new Person(‘Pippo’, ‘Pluto’); console.log(pippo.firstname); pippo.firstname = 'Paperino';

in collaborazione conES6 & TypeScript È possibile estendere le classi (principio di ereditarietà). 41

in collaborazione conES6 & TypeScript 42 class BaseLog { constructor(){ this._logName = 'Log 1'; } log(msg){ console.log(msg); } } class Logger extends BaseLog { constructor(logName){ super(logName); } writeLine(msg){ super.log(`${msg}rn#`); } } var logger = new Logger(‘Test’); logger.log('This is a log'); logger.writeLine('This is another log');

6. MODULES in collaborazione conES6 & TypeScript 43

in collaborazione conES6 & TypeScript Con ES6 è stata aggiunta la possibilità di creare dei moduli da poter esportare ed importare a seconda delle esigenze. Allo stato attuale, per poter utilizzare questa feature è necessario un module loader come CommonJS o AMD. Grazie ad Angular CLI (e Webpack), questa feature è già attiva e funzionante in un nuovo progetto Angular. 44

in collaborazione conES6 & TypeScript 45 // customer.js export let name = 'James'; export let city = 'Chandler'; // main.js import { name, city } from './customer'; console.log(name); console.log(city); // main2.js import * as customer from './customer'; console.log(customer.name); console.log(customer.city);

7. MAPS & SETS in collaborazione conES6 & TypeScript 46

in collaborazione conES6 & TypeScript Con Map e Set è possibile collezionare e salvare dei dati. Map può salvare una collezione di coppie chiave/valore (la chiave deve essere univoca). 47

in collaborazione conES6 & TypeScript 48 const map = new Map(); // set items map.set('Pippo', 'Pluto'); map.set('One', 'Item'); // duplicate index, ignored map.set('Pippo', 'Pluto'); // get size of map console.log(map.size); // get an item console.log(map.get('Pippo')); // check if item exists console.log(map.has('Pippo')); // delete an item map.delete('One'); // clear list map.clear();

in collaborazione conES6 & TypeScript Set può salvare una collezione di valori (il valore deve essere univoco). 49

in collaborazione conES6 & TypeScript 50 const set = new Set(); // add items set.add('Pippo'); set.add('Pluto'); // duplicate value, ignored set.add('Pippo'); // get size of set console.log(set.size); // check if item exists console.log(set.has('Pippo')); // delete an item set.delete('Pluto'); // clear list set.clear();

TypeScript Utilizzare ES6 potenziato

in collaborazione conES6 & TypeScript Tutte le feature di ES6 ﬁnora viste possono essere utilizzare ﬁn da subito con TypeScript, permettendo, inoltre, la compatibilità con sistemi più datati*. 52 * Non tutte le possibilità di ES6 vengono supportate e convertite da TypeScript: https://kangax.github.io/compat-table/es6/

1. LISTA DELLA SPESA in collaborazione conES6 & TypeScript 53

in collaborazione conES6 & TypeScript TypeScript npm install -g typescript https://www.typescriptlang.org/ 54

in collaborazione conES6 & TypeScript COME FUNZIONA TYPESCRIPT? 55

in collaborazione conES6 & TypeScript TypeScript, tecnicamente, è un transpiler, ossia "converte" il linguaggio con cui stiamo scrivendo (typescript) in un altro linguaggio (javascript). Poiché TypeScript è un superset di JavaScript, l'unico linguaggio utilizzato è JavaScript stesso, potenziato con alcune possibilità offerte da TypeScript. 56

2. TIPIZZAZIONE in collaborazione conES6 & TypeScript 57

in collaborazione conES6 & TypeScript È possibile tipizzare una variabile assegnando un tipo di dato 58 let a: number = 1; let b: string = 'This is a string'; let c: boolean = true; let d: undefined; let e: null = null;

in collaborazione conES6 & TypeScript 59 let a: number = 1; La deﬁnizione del tipo è assolutamente opzionale. Tuttavia, deﬁnire il tipo di dato previene gli errori e permette ad IDE ed editor predisposti di aiutare lo sviluppatore con suggerimenti di completamento.

in collaborazione conES6 & TypeScript I tipi di dato possono essere aggiunti anche a funzioni, sia per i parametri d'ingresso, che per il valore di ritorno 60 function sum(a: number, b: number): number { } function log(msg: string): void { } Il tipo void indica che non ci sono valori di ritorno.

in collaborazione conES6 & TypeScript Esiste un tipo particolare introdotto da TypeScript, cioè any, il quale permette di salvare qualsiasi tipo di dato (e di modiﬁcarlo nel tempo). 61 const somethingSpecial: any; È sempre buona norma usare meno any possibili!

in collaborazione conES6 & TypeScript Per gli array (od oggetti in generale), è possibile utilizzare due scritture diverse. 62 let d: number[] = [1, 2, 3]; let c: Array<number> = [1, 2, 3]; Il risultato sarà il medesimo, ma la seconda deﬁnizione utilizza i generics per segnare che l'array potrà contenere solo numeri.

3. INTERFACES in collaborazione conES6 & TypeScript 63

in collaborazione conES6 & TypeScript 64 Oltre ai tipi di dato primitivi, TypeScript permette di creare dei modelli di dati personalizzati, chiamati interfaces, con i quali poter avere controllo sulle strutture dati complesse.

in collaborazione conES6 & TypeScript 65 interface IPerson { firstname: string; lastname: string; age: number; } Le interfacce rappresentano un contratto (una ﬁrma) da applicare alle variabili. Anche se lo ricordano, non sono oggetti JavaScript.

in collaborazione conES6 & TypeScript 66 interface IPerson { firstname: string; lastname: string; age: number; } let pippo: IPerson = { firstname: 'Pippo', lastname: 'Pluto', age: 33 }

in collaborazione conES6 & TypeScript 67 interface IPerson { firstname: string; lastname: string; age: number; weight?: number; } Alcuni elementi di una interfaccia possono essere opzionali

in collaborazione conES6 & TypeScript 68 class AppComponent implements OnInit { ngOnInit() { } } Le interfacce, inoltre, possono venir implementate all'interno di una classe mediante la direttiva implements. interface OnInit { ngOnInit(): void; }

4. GENERICS in collaborazione conES6 & TypeScript 69

in collaborazione conES6 & TypeScript 70 Lo scopo principale di uno sviluppatore non è solo quello di creare componenti con API ben deﬁnite, ma che si possano anche riutilizzare. In linguaggi come C# o Java esiste il concetto di generics, un componente che possa essere utilizzato con una varietà di tipi di dato, invece che con uno soltanto.

in collaborazione conES6 & TypeScript 71 function identity(arg: number): number { return arg; } Prendiamo come esempio una funzione che, dato un parametro in ingresso, ne ritorna lo stesso valore. Se volessimo far si che il tipo dell'argomento e il ritorno della funzione sia diverso per ogni tipo di dato, dovremmo creare n funzioni, una per ogni tipo.

in collaborazione conES6 & TypeScript 72 function identity(arg: any): any { return arg; } Potremmo utilizzare any per deﬁnire un valore generico (any, di per sé, è un tipo generico). Ma, in questo modo, perdiamo tutte le informazioni e le possibilità che ci offre TypeScript.

in collaborazione conES6 & TypeScript 73 function identity<T>(arg: T): T { return arg; } console.log(identity<number>(10)); console.log(identity<string>('A string')); Modiﬁcando la funzione impostandola con un generic, invece, facciamo si che sia lo sviluppatore a scegliere il tipo di dato corretto da utilizzare di volta in volta. T è solo un placeholder ed una convenzione. Può essere utilizzata qualsiasi altra lettera.

5. TYPE DEFINITION FILES in collaborazione conES6 & TypeScript 74

in collaborazione conES6 & TypeScript 75 Finché utilizziamo i tipi di dato inclusi e gestiti da TypeScript, possiamo trarre beneﬁcio da tutte le sue feature. Ma se volessimo utilizzare una libreria esterna, come ad esempio jQuery, con TypeScript?

in collaborazione conES6 & TypeScript 76 $('#app').css('background-color', 'red'); error TS2304: Cannot find name '$'.

in collaborazione conES6 & TypeScript 77 Per risolvere questo problema, TypeScript mette a disposizione la possibilità di creare un particolare ﬁle (.d.ts) al cui interno ci sono le deﬁnizioni dei tipi di dato.

in collaborazione conES6 & TypeScript 78 Deﬁnitely Typed http://deﬁnitelytyped.org/

in collaborazione conES6 & TypeScript 79 Typings npm install -g typings typings install --global dt~jquery --save Typings è deprecato dall'uscita di TypeScript 2.0

in collaborazione conES6 & TypeScript 80 @types npm install --save-dev @types/jquery Dalla versione 2.0 di TypeScript

Introduzione ad ECMAScript 6 (ES6) e TypeScript

More Related Content

What's hot

Similar to Introduzione ad ECMAScript 6 (ES6) e TypeScript

More from Giovanni Buffa

Introduzione ad ECMAScript 6 (ES6) e TypeScript