Da sempre l'organizzazione del codice in JavaScript ha costituito un grosso problema. Non avendo un supporto nativo per la strutturazione del codice in unità isolate e riutilizzabili, gli sviluppatori hanno dovuto trovare delle soluzioni che permettessero loro di simulare costrutti presenti in altri linguaggi di programmazione: dall'applicazione del Module Pattern alla definizione di standard come CommonJS e AMD. TypeScript ha fin dalla sua nascita previsto un supporto per organizzare il codice e con l'avvento di ECMAScript 6 si è consolidata la sua convergenza con le specifiche standard del linguaggio.
L'approccio organizzativo proposto da TypeScript fa uso di due costrutti: namespace e moduli.
Vediamo in questa sezione in che modo TypeScript ci aiuta a strutturare le nostre applicazioni.
Il namespace, nomi vs variabili globali
Tra le cattive pratiche ereditate dal modo di realizzare script, negli anni in cui JavaScript era appena nato, c'è l'uso di variabili e funzioni globali. Se in una pagina con poche righe di codice la dichiarazione di funzioni e variabili nello scope globale può essere tollerato, quando la quantità di codice cresce tanto da diventare un'applicazione di una certa complessità, la presenza di elementi globali costituisce un grosso problema.
A parte il proliferare di variabili che vivono in memoria per tutto il tempo di vita dell'applicazione, la gestione di elementi globali sfugge rapidamente al nostro controllo, dal momento che non è facile comprendere chi e quando le modifica. Inoltre, il rischio di avere collisioni con nomi esistenti e ridefinizioni di funzioni rende il nostro codice predisposto a bug insidiosi.
Dal momento che TypeScript è stato progettato per lo sviluppo di applicazioni complesse, non poteva mancare un costrutto per risolvere questo problema: il namespace.
In generale, un namespace è una collezione di nomi che identificano elementi in un dato contesto. Lo scopo di un namespace è di evitare collisioni di nomi fornendo un modo di raggruppare elementi per categoria. Il seguente è un esempio di namespace TypeScript:
namespace Geometria {
var pigreco = 3.14;
export function circonferenza(raggio:number) {
return 2 * pigreco * raggio;
}
}Nell'esempio viene definito un namespace con nome Geometria destinato a contenere variabili, classi, interfacce, funzioni, ecc. che hanno una qualche relazione con la geometria. Nel caso specifico il nostro namespace contiene una funzione che calcola la circonferenza di un cerchio.
Notiamo che la funzione circonferenza() è preceduta dalla parola chiave export. Questa parola chiave fa sì che la funzione risulti accessibile dall'esterno del namespace, mentre tutto il resto, come ad esempio la variabile pigreco, sarà accessibile soltanto all'interno del namespace.
L'accesso alla funzione esposta viene effettuata specificando il nome del namespace, come quando si esegue il metodo di un oggetto:
Geometria.circonferenza(4);Il contenuto di un namespace può essere definito in più file. Ad esempio, potremmo avere un file diverso in cui abbiamo la seguente definizione:
namespace Geometria {
var pigreco = 3.14;
export function areaCerchio(raggio:number) {
return pigreco * raggio * raggio;
}
}Come possiamo vedere, anche qui stiamo definendo il namespace Geometria, ma in questo caso viene esportata una funzione che calcola l'area del cerchio. Questa definizione si aggiunge a quella precedente contribuendo ad arricchire il contenuto del namespace Geometria.
Il risultato è un namespace Geometria con le funzioni circonferenza() e areaCerchio() anche se le loro definizioni vengono effettuate in file separati. Questo aspetto offre una maggiore flessibilità nell'organizzazione del codice con un significativo beneficio in termini di leggibilità.
È possibile creare gerarchie di namespace annidandoli uno dentro l'altro per una più chiara organizzazione, come mostra il seguente esempio:
namespace Geometria {
export namespace FigurePiane {
export class Cerchio {...}
export class Triangolo {...}
}
export namespace FigureSolide {
export class Sfera {...}
export class Piramide {...}
}
}In questo caso l'accesso agli elementi del namespace viene effettuato indicando il percorso dal namespace più esterno:
var myCerchio = new Geometria.FigurePiane.Cerchio();Possiamo abbreviare il percorso ad un namespace annidato specificando un alias tramite la parola chiave import, come nel seguente esempio:
import figurePiane = Geometria.FigurePiane;
var myCerchio = new figurePiane.Cerchio();