TypeScript è un linguaggio di programmazione open source sviluppato inizialmente da Microsoft come estensione di JavaScript, che aggiunge tipi, classi, interfacce e moduli opzionali al linguaggio tradizionale. Si tratta di un linguaggio tipizzato, ovvero aggiunge le definizioni di tipo statico: i tipi consentono di descrivere la forma di un oggetto, consentendo al compilatore di verificare che il codice sia scritto correttamente evitando errori in fase di esecuzione.
In questo articolo sono presentati alcuni semplici esempi di codice per la manipolazione di liste, concetto molto importante e frequente nei progetti web che visualizzano e manipolano dati. Con TypeScript e il framework Angular, è indispensabile conoscere molto bene l’uso delle Arrow-Function e dell’operatore freccia, senza questa conoscenza risulterà impossibile leggere o scrivere codice. Si rimanda alla lettura e alla documentazione ufficiale di mozilla.org per maggiori dettagli.
La sintassi base per definire una variabile in Typescript:
showSpinner: Boolean = false;
Il nome della variabile viene seguito dal due-punti e dal tipo, successivamente è possibile assegnare un valore iniziale. Se si tratta di un tipo non primitivo ma se si tratta di un oggetto la sintassi è simile
export interface AnnotazioniEntity {
id:string|number; // Primary ID
nome:string|null;
}
element : AnnotazioniEntity = {id:1,nome:'Alberto'};
In questo semplice esempio l’inizializzazione avviene tramite la rappresentazione in formato Json, tale modalità è considerata uno standard universale.
Per la gestione delle liste la sintassi è molto simile, per esempio
lista : AnnotazioniEntity[] = [];
Inoltre è importante sapere, perché modalità molto usata, è possibile usare il tipo “any” come jolly per indicare che la variabile può accettare qualsiasi tipo di variabile, per esempio:
list$: Observable<any> = ...;
in questo esempio, nel nome della variabile è stato aggiunto il carattere dollaro “$”, questo carattere è tollerato dal compilatore e viene spesso usato per indicare una variabile destinazione di un metodo asincrono, quindi potrebbe non essere valorizzata al caricamento.
Per la gestione delle liste è possibile usare i metodi del linguaggio tra cui: forEach(), indexOf(), slice(), map() e filter(). Uno dei metodi più usato è “filter”, usato per selezionare solo alcuni elementi da una lista di partenza a seconda di un criterio indicato in un metodo, per esempio volendo filtrare tutti gli elementi con il nome Alberto:
this.listaAlberto = this.lista.filter ( item => item.nome=='Alberto');
Altro metodo molto usato è il map, usato per modificare gli elementi di una lista, per esempio volendo modificare tutti i nomi della nostra lista:
this.listaModificata = this.lista.map ( item => item.nome='Andrea' );
Per l’ordinamento degli elementi di una lista è possibile usare il metodo map e indicare la logica di confronto tra due elementi, per esempio volendo ordinare gli elementi una lista per nome
this.listaVisualizzata$.sort( (el1, el2) => el1.nome > el2.nome ? 1 : -1);
da notare che in questo caso il linguaggio permette l’operatore di confronto “minore” anche si tratta di stringhe, cosa non permessa in tanti altri linguaggi come Java.
Per selezionare un sottoinsieme di una lista si usa il metodo slide indicando l’indice primo e l’ultimo elemento (ricordandosi di che si usa la convenzione che il primo elemento è in indice zero e l’ultimo elemento non viene compreso):
this.listaPrioritaria = this.listaPersone.slice(0,20);
Per eliminare i duplicati da una lista ed ottenere una lista di elementi unici si può usare il tipo Set, per esempio partendo da una lista di persone recuperare l’elenco di tutti i cognomi senza duplicati:
[...new Set(this.listaPersone.map(e => e.cognome))]
Con il metodo reduce è possibile eseguire operazioni su tutti gli elemento di una lista, l’esempio più semplice è calcolare la somma degli elementi di una lista:
this.listaNumeriPari= [...Array(10).keys()].filter(el=>el%2==0);
this.totale=this.listaNumeriPari.reduce((sum, element) =>sum+element, 0);
In questo semplice esempio sono combinati due istruzioni: la prima crea un array con i primi 10 numeri e poi filtra solo i numeri pari, la seconda istruzione esegue la somma con il metodo reduce. Un’altra combinazione di questi metodi è il caso pratico di cercare il valore minimo di una proprietà di una lista di oggetti, per esempio per cercare il più giovane in una lista:
getGiovane = (lista) => {
let l=[...listaPersone.map(e => Number(e.eta)+1)].concat([0]);
return Math.max( l.reduce((a, b) => Math.max(a, b), 0) );
}
Un simpatico schema che spiega le funzioni principali funzioni disponibili:
La gestione delle date è sempre un tema particolare in informatica in quanto ogni linguaggio ha il suo standard e i suoi metodi, Typescript eredita da Javascript la classe Date che rappresenta data e ora assieme:
let date: Date = new Date();
let date2: Date = new Date("2042-10-16");
let date3: Date = new Date(2018, 08, 31, 17, 23, 42, 11);
Il risultato è un oggetto che se stampato risulterà nel formato
Tue Feb 05 2019 12:05:22 GMT+0530 (IST)
Tutti i metodi della classe Java sono disponibili nella documentazione ufficiale e tutti i metodi disponibili hanno una pagina dedicata. La conversione tra un fuso orario ed un altro è possibile grazie alla combinazioned i metodi, per esempio:
let dateUTC=new Date("2042-10-16"); // UTC
let dateITA= ""+dateUTC.toLocaleDateString("fr-BE")
+ " " + dateUTC.toLocaleTimeString("fr-BE");
