Come utilizzare gli spazi dei nomi in TypeScript
Una collisione di denominazione si verifica quando due o più componenti di codice utilizzano lo stesso nome per una variabile, una funzione o una classe. Sono comuni in grandi progetti in cui molte persone lavorano sulla stessa base di codice. Possono rendere difficile determinare quale componente del codice è responsabile dei bug.
Utilizzando gli spazi dei nomi, puoi organizzare e gestire il tuo codice in modo che i gruppi di componenti correlati siano sotto un identificatore comune. Ciò ridurrà il rischio di conflitti di denominazione.
Creazione di uno spazio dei nomi
Puoi creare spazi dei nomi in TypeScript usando la parola chiave namespace . Seguilo con un identificatore per denominare lo spazio dei nomi e un blocco racchiuso tra parentesi graffe. La sintassi è simile a quella che useresti per creare una classe in JavaScript.
Per esempio:
namespace Example {}
È quindi possibile dichiarare i membri dello spazio dei nomi (variabili, funzioni e classi) all’interno del blocco dello spazio dei nomi:
namespace Example {
export function Foo(): void {
console.log("This is a function inside the Example namespace");
}
export class Bar {
property: string;
constructor(property: string) {
this.property = property;
}
}
export const baz = "This is a namespace variable"
}
Nell’esempio precedente, Foo , Bar e baz sono membri dello spazio dei nomi di esempio . Per impostazione predefinita, puoi accedere solo ai membri di uno spazio dei nomi all’interno dello stesso spazio dei nomi. Utilizzare la parola chiave export per rendere ogni membro dello spazio dei nomi accessibile al di fuori di esso.
Puoi accedere a tutti i membri disponibili pubblicamente di uno spazio dei nomi chiamando il nome del membro dello spazio dei nomi utilizzando la notazione con punto:
Example.foo(); // This is a function inside the Example namespace
const bar = new Example.Bar("string");
console.log(bar.property); // string
console.log(Example.baz); // This is a namespace variable
Spazi dei nomi nidificati
TypeScript ti consente di nidificare gli spazi dei nomi all’interno di altri spazi dei nomi per creare una struttura gerarchica per il tuo codice. La nidificazione degli spazi dei nomi può ridurre ulteriormente i rischi di collisioni di denominazione raggruppando gli spazi dei nomi correlati sotto un identificatore comune.
Per esempio:
namespace Example {
export const property_1 = "Foo";
export namespace Bar {
export const printFoo = function () {
console.log(property_1);
};
}
export namespace Baz {
export class Foo {
property: string;
constructor(property: string) {
this.property = property;
}
}
}
}
Il blocco di codice precedente fornisce un esempio di uno spazio dei nomi nidificato. Lo spazio dei nomi di esempio è lo spazio dei nomi di primo livello, contenente lo spazio dei nomi Bar e lo spazio dei nomi Baz .
È possibile accedere alle proprietà in uno spazio dei nomi nidificato utilizzando la notazione con punto che segue la struttura gerarchica creata.
Per esempio:
console.log(Example.property_1); // Foo
Example.Bar.printFoo() // Foo
const foo = new Example.Baz.Foo("example")
Questo codice di esempio accede a ciascun membro dello spazio dei nomi tramite lo spazio dei nomi padre. L’accesso diretto a una proprietà, invece che tramite il relativo spazio dei nomi padre, genererebbe un errore:
Example.printFoo()
// error TS2339: Property 'printFoo' does not exist on type 'typeof Example'
Sebbene gli spazi dei nomi nidificati possano aiutarti a organizzare il tuo codice, gli spazi dei nomi profondamente annidati possono produrre l’effetto opposto. Gli spazi dei nomi profondamente nidificati rendono il codice più difficile da leggere e mantenere.
Alias dello spazio dei nomi
Un alias dello spazio dei nomi è un nome abbreviato assegnato a un membro dello spazio dei nomi, che ne semplifica il riferimento.
È possibile creare un alias dello spazio dei nomi utilizzando la parola chiave import seguita dal nome che si desidera assegnare all’alias. Quindi, assegna la parola chiave import e il nome alias a un membro dello spazio dei nomi.
Per esempio:
namespace Car {
export namespace Tesla {
export class ModelX {
create(): String {
return `Model X Created`
}
}
}
export namespace Toyota {
export class Camry {}
}
export namespace Ford {
export class Mustang {}
}
}
// Creating the alias
import tesla = Car.Tesla
const modelX = new tesla.ModelX()
modelX.create() // Model X Created
Questo esempio crea un alias per lo spazio dei nomi Car.Tesla . Puoi utilizzare questo alias per accedere più facilmente alle proprietà dello spazio dei nomi Tesla , come la classe ModelX.
Utilizzo di spazi dei nomi in più file
Per utilizzare uno spazio dei nomi in un file diverso, devi importarlo. L’importazione di spazi dei nomi è diversa dall’importazione di variabili, funzioni, classi, ecc. A seconda del sistema di moduli del progetto, è possibile importarli utilizzando la parola chiave require o import .
Tuttavia, è possibile importare spazi dei nomi solo utilizzando la direttiva barra tripla, che è un commento a riga singola contenente un tag XML.
Per esempio:
// main.ts
/// <reference path="index.ts"/>
Example.foo()
Questo esempio utilizza la direttiva tripla barra all’interno di un file main.ts. La direttiva fa riferimento al file index.ts , che contiene lo spazio dei nomi di esempio . Senza l’importazione, lo spazio dei nomi è disponibile solo all’interno dello stesso file che lo definisce.
Dopo aver fatto riferimento al file index.ts , puoi accedere allo spazio dei nomi di esempio e ai relativi membri disponibili pubblicamente. Ad esempio, puoi chiamare il metodo foo nello spazio dei nomi di esempio .
Dopo aver utilizzato più file, dovrai assicurarti che TypeScript compili e carichi tutto il codice necessario. Puoi farlo concatenando l’output dal compilatore TypeScript usando l’ opzione outFile . Questo compilerà quindi tutti i file di input in un singolo file di output JavaScript. La sintassi generale per eseguire il compilatore in questo modo è:
tsc --outFile <JAVASCRIPT_FILE> <TYPESCRIPT_FILE>
Sostituisci <JAVASCRIPT_FILE> con il nome del file JavaScript di destinazione. Sostituisci <TYPESCRIPT_FILE> con il nome del file TypeScript contenente la direttiva tripla barra.
Per esempio:
tsc --outFile index.js main.ts
Questo comando compilerà il contenuto del file main.ts , insieme a tutti i file a cui fa riferimento la direttiva triple-slash, nel file index.js .
In alternativa, puoi specificare ciascun file singolarmente:
tsc --outFile <JAVASCRIPT_FILE> <TYPESCRIPT_FILE_1> <TYPESCRIPT_FILE_2>
È importante notare che la direttiva tripla barra è valida solo se dichiarata all’inizio di un file. Se provi a usarlo altrove, TypeScript lo tratterà come un normale commento a riga singola senza significato speciale.
Dovresti usare spazi dei nomi o moduli?
Sebbene gli spazi dei nomi non siano deprecati, è spesso consigliabile organizzare e gestire il codice utilizzando i moduli ES6. I moduli sono più facili da mantenere e gestire e puoi applicarli a più file.
Inoltre, puoi specificare le relazioni tra i moduli in termini di importazioni ed esportazioni a livello di file. Gli spazi dei nomi non possono definire le loro dipendenze.
In definitiva, la scelta tra spazi dei nomi e moduli dipenderà dalle esigenze e dai requisiti specifici del tuo progetto, poiché entrambi offrono un modo prezioso di organizzare e gestire il codice in TypeScript.
Lascia un commento