Introduzione ad ECMAScript 6 (ES6) e TypeScript

in collaborazione conES6 & TypeScript
COS'È TYPESCRIPT?
2

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

PERCHÉ TYPESCRIPT?
4

✴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

✴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

PRINCIPALI VANTAGGI
7

✴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

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

WebStorm
https://www.jetbrains.com/webstorm/
11

Visual Studio 
Code
https://code.visualstudio.com/
12
...consiglio però vivamente WebStorm!!!

Introduzione ad ES6
Le principali novità

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

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

È 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

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

var log = function(msg) {
console.log(msg);
}
var log = msg => console.log(msg);

var c = {
name: 'Pippo',
greet: function(){
var setName = (newName) => this.name = newName;
setName('Pluto');
}
}

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

var log = function(msg = 'This is a message') {
console.log(msg);
}
log();

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

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

3.
STRINGHE

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

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

È possibile concatenare più array grazie allo spread operator.
30

let a = [1, 2, 3];
let b = [4, 5, 6];
console.log([...a, ...b]);
console.log([...b, ...a]);

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

const a = ['Pippo', 'Pluto'];
let [firstname, lastname] = a;
console.log(firstname);
console.log(lastname);

const a = ['Pippo', 'Pluto', 'Paperino'];
let [firstname, , lastname] = a;
console.log(firstname);
console.log(lastname);

5.
CLASSI

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

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

Per avere maggiore controllo sulle proprietà della classe, è
possibile implementare getter e setter.
39

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!');
}
}
}
console.log(pippo.firstname);
pippo.firstname = 'Paperino';

È possibile estendere le classi (principio di ereditarietà).
41

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

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

// 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

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

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

Set può salvare una collezione di valori (il valore deve essere
univoco).
49

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

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

TypeScript
npm install -g typescript
https://www.typescriptlang.org/
54

COME FUNZIONA
TYPESCRIPT?
55

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

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

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.

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.

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!

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

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.

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.

interface IPerson {
firstname: string;
lastname: string;
age: number;
}
let pippo: IPerson = {
firstname: 'Pippo',
lastname: 'Pluto',
age: 33
}

interface IPerson {
firstname: string;
lastname: string;
age: number;
weight?: number;
}
Alcuni elementi di una interfaccia possono essere opzionali

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

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.

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.

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.

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

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?

$('#app').css('background-color', 'red');
error TS2304: Cannot find name '$'.

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.

Deﬁnitely Typed
http://deﬁnitelytyped.org/

Typings
npm install -g typings
typings install --global dt~jquery --save
Typings è deprecato dall'uscita di TypeScript 2.0

@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 (20)

Similar to Introduzione ad ECMAScript 6 (ES6) e TypeScript (20)

More from Giovanni Buffa (20)

Introduzione ad ECMAScript 6 (ES6) e TypeScript