3. 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
5. 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 sacrificare il supporto a browser più
datati.
5
6. 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
8. 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
9. 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
14. in collaborazione conES6 & TypeScript
Molte delle novità introdotte con ES6
sono delle shortcuts rispetto ad ES5,
andando a semplificare il lavoro degli
sviluppatori.
Per maggiori informazioni
http://es6-features.org/
14
16. 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
17. 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'
19. in collaborazione conES6 & TypeScript
Vengono introdotte le Arrow Functions, un modo per definire
una funzione in modo più semplice.
Grazie a questo costrutto viene anche risolto il problema di this
all'interno degli oggetti.
19
20. in collaborazione conES6 & TypeScript 20
var log = function(msg) {
console.log(msg);
}
var log = msg => console.log(msg);
21. in collaborazione conES6 & TypeScript 21
var c = {
name: 'Pippo',
greet: function(){
var setName = (newName) => this.name = newName;
setName('Pluto');
}
}
22. in collaborazione conES6 & TypeScript
Grazie ai default parameters, è possibile valorizzare un parametro
in ingresso di una funzione senza la necessità di definirlo al
momento dell'utilizzo della funzione stessa.
22
23. in collaborazione conES6 & TypeScript 23
var log = function(msg = 'This is a message') {
console.log(msg);
}
log();
24. in collaborazione conES6 & TypeScript
È possibile passare n parametri in ingresso ad una funzione
grazie allo spread operator.
24
25. 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);
27. 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
28. 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}
`);
30. in collaborazione conES6 & TypeScript
È possibile concatenare più array grazie allo spread operator.
30
31. in collaborazione conES6 & TypeScript 31
let a = [1, 2, 3];
let b = [4, 5, 6];
console.log([...a, ...b]);
console.log([...b, ...a]);
32. in collaborazione conES6 & TypeScript
Grazie al destructuring è possibile mappare, valore per valore, gli
elementi di un array*.
32
* utilizzabile anche su oggetti.
33. in collaborazione conES6 & TypeScript 33
const a = ['Pippo', 'Pluto'];
let [firstname, lastname] = a;
console.log(firstname);
console.log(lastname);
34. in collaborazione conES6 & TypeScript 34
const a = ['Pippo', 'Pluto', 'Paperino'];
let [firstname, , lastname] = a;
console.log(firstname);
console.log(lastname);
36. in collaborazione conES6 & TypeScript
Le classi in ES6 rappresentano un modo veloce per utilizzare le
funzioni come function constructor.
36
37. 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());
38. 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());
39. in collaborazione conES6 & TypeScript
Per avere maggiore controllo sulle proprietà della classe, è
possibile implementare getter e setter.
39
40. 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';
41. in collaborazione conES6 & TypeScript
È possibile estendere le classi (principio di ereditarietà).
41
42. 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');
44. 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
45. 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);
47. 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
48. 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();
49. in collaborazione conES6 & TypeScript
Set può salvare una collezione di valori (il valore deve essere
univoco).
49
50. 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();
52. in collaborazione conES6 & TypeScript
Tutte le feature di ES6 finora viste possono essere utilizzare fin 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/
56. 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
58. 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;
59. in collaborazione conES6 & TypeScript 59
let a: number = 1;
La definizione del tipo è assolutamente opzionale.
Tuttavia, definire il tipo di dato previene gli errori e
permette ad IDE ed editor predisposti di aiutare lo
sviluppatore con suggerimenti di completamento.
60. 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.
61. in collaborazione conES6 & TypeScript
Esiste un tipo particolare introdotto da TypeScript,
cioè any, il quale permette di salvare qualsiasi tipo
di dato (e di modificarlo nel tempo).
61
const somethingSpecial: any;
È sempre buona norma usare meno any possibili!
62. 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
definizione utilizza i generics per segnare che l'array
potrà contenere solo numeri.
64. 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.
65. in collaborazione conES6 & TypeScript 65
interface IPerson {
firstname: string;
lastname: string;
age: number;
}
Le interfacce rappresentano un contratto (una firma) da
applicare alle variabili. Anche se lo ricordano, non sono oggetti
JavaScript.
67. in collaborazione conES6 & TypeScript 67
interface IPerson {
firstname: string;
lastname: string;
age: number;
weight?: number;
}
Alcuni elementi di una interfaccia possono essere opzionali
68. 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;
}
70. in collaborazione conES6 & TypeScript 70
Lo scopo principale di uno sviluppatore non è solo quello di
creare componenti con API ben definite, 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.
71. 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.
72. in collaborazione conES6 & TypeScript 72
function identity(arg: any): any {
return arg;
}
Potremmo utilizzare any per definire 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.
73. in collaborazione conES6 & TypeScript 73
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<number>(10));
console.log(identity<string>('A string'));
Modificando 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.
75. in collaborazione conES6 & TypeScript 75
Finché utilizziamo i tipi di dato inclusi e gestiti da TypeScript,
possiamo trarre beneficio da tutte le sue feature.
Ma se volessimo utilizzare una libreria esterna, come ad esempio
jQuery, con TypeScript?
76. in collaborazione conES6 & TypeScript 76
$('#app').css('background-color', 'red');
error TS2304: Cannot find name '$'.
77. in collaborazione conES6 & TypeScript 77
Per risolvere questo problema, TypeScript mette a disposizione la
possibilità di creare un particolare file (.d.ts) al cui interno ci
sono le definizioni dei tipi di dato.