Comment utiliser les espaces de noms dans TypeScript

Une collision de noms se produit lorsque deux composants de code ou plus utilisent le même nom pour une variable, une fonction ou une classe. Ils sont courants dans les grands projets où de nombreuses personnes travaillent sur la même base de code. Ils peuvent compliquer la détermination du composant de code responsable des bogues.

À l’aide d’espaces de noms, vous pouvez organiser et gérer votre code afin que des groupes de composants associés soient sous un identifiant commun. Cela atténuera le risque de conflits de noms.

Création d’un espace de noms

Vous pouvez créer des espaces de noms dans TypeScript à l’aide du mot-clé namespace . Faites-le suivre d’un identifiant pour nommer l’espace de noms et d’un bloc entouré d’accolades. La syntaxe est similaire à celle que vous utiliseriez pour créer une classe en JavaScript.

Par exemple:

namespace Example {}


Vous pouvez ensuite déclarer les membres de l’espace de noms (variables, fonctions et classes) dans le bloc d’espace de noms :

namespace Example {
  export function Foo(): void {
    console.log("This is a function inside the Example namespace");
  }


  export class Bar {
    property: string;

  export const baz = "This is a namespace variable"
}


Dans l’exemple ci-dessus, Foo , Bar et baz sont membres de l’ espace de noms Example . Par défaut, vous ne pouvez accéder qu’aux membres d’un espace de noms à l’intérieur de ce même espace de noms. Utilisez le mot-clé export pour rendre chaque membre de l’espace de noms accessible en dehors de celui-ci.

Vous pouvez accéder à tous les membres publiquement disponibles d’un espace de noms en appelant le nom du membre de l’espace de noms en utilisant la notation par points :

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


Espaces de noms imbriqués

TypeScript vous permet d’imbriquer des espaces de noms dans d’autres espaces de noms pour créer une structure hiérarchique pour votre code. L’imbrication des espaces de noms peut réduire davantage les risques de collisions de noms en regroupant les espaces de noms associés sous un identifiant commun.

Par exemple:

namespace Example {
  export const property_1 = "Foo";


  export namespace Bar {
    export const printFoo = function () {
      console.log(property_1);
    };
  }

      constructor(property: string) {
        this.property = property;
      }
    }
  }
}


Le bloc de code ci-dessus fournit un exemple d’espace de noms imbriqué. L’ espace de noms Example est l’espace de noms de niveau supérieur, contenant l’ espace de noms Bar et l’ espace de noms Baz .

Vous pouvez accéder aux propriétés dans un espace de noms imbriqué à l’aide d’une notation par points qui suit la structure hiérarchique que vous avez créée.

Par exemple:

console.log(Example.property_1); // Foo
Example.Bar.printFoo() // Foo
const foo = new Example.Baz.Foo("example")


Cet exemple de code accède à chaque membre de l’espace de noms via l’espace de noms parent. Accéder directement à une propriété, au lieu de passer par son espace de noms parent, générerait une erreur :

Example.printFoo()
// error TS2339: Property 'printFoo' does not exist on type 'typeof Example'


Bien que les espaces de noms imbriqués puissent vous aider à organiser votre code, les espaces de noms profondément imbriqués peuvent produire l’effet inverse. Les espaces de noms profondément imbriqués rendent votre code plus difficile à lire et à maintenir.

Alias ​​d’espace de noms

Un alias d’espace de noms est un nom abrégé donné à un membre de l’espace de noms, ce qui facilite la référence.

Vous pouvez créer un alias d’espace de noms à l’aide du mot-clé import suivi du nom que vous souhaitez attribuer à l’alias. Attribuez ensuite le mot clé d’importation et le nom d’alias à un membre de l’espace de noms.

Par exemple:

namespace Car {
  export namespace Tesla {
    export class ModelX {
      create(): String {
        return `Model X Created`
      }
    }
  }


  export namespace Toyota {
     export class Camry {}
  }

const modelX = new tesla.ModelX()
modelX.create() // Model X Created


Cet exemple crée un alias pour l’ espace de noms Car.Tesla . Vous pouvez utiliser cet alias pour accéder plus facilement aux propriétés de l’ espace de noms Tesla , comme la classe ModelX.

Utilisation d’espaces de noms dans plusieurs fichiers

Pour utiliser un espace de noms dans un autre fichier, vous devez l’importer. L’importation d’espaces de noms est différente de l’importation de variables, de fonctions, de classes, etc. Selon le système de modules de votre projet, vous pouvez les importer à l’aide du mot clé require ou import .

Cependant, vous ne pouvez importer des espaces de noms qu’à l’aide de la directive triple barre oblique, qui est un commentaire sur une seule ligne contenant une balise XML.

Par exemple:

// main.ts


/// <reference path="index.ts"/>
Example.foo()


Cet exemple utilise la directive triple barre oblique dans un fichier main.ts. La directive fait référence au fichier index.ts , qui contient l’ espace de noms Example . Sans importation, l’espace de noms n’est disponible que dans le même fichier qui le définit.

Après avoir fait référence au fichier index.ts , vous pouvez accéder à l’ espace de noms Example et à ses membres accessibles au public. Par exemple, vous pouvez appeler la méthode foo sur l’ espace de noms Example .

Une fois que vous utilisez plusieurs fichiers, vous devez vous assurer que TypeScript compile et charge tout le code nécessaire. Vous pouvez le faire en concaténant la sortie du compilateur TypeScript à l’aide de l’ option outFile . Cela compilera ensuite tous les fichiers d’entrée dans un seul fichier de sortie JavaScript. La syntaxe générale pour exécuter le compilateur comme ceci est :

tsc --outFile <JAVASCRIPT_FILE> <TYPESCRIPT_FILE>


Remplacez <JAVASCRIPT_FILE> par le nom de votre fichier JavaScript cible. Remplacez <TYPESCRIPT_FILE> par le nom du fichier TypeScript contenant la directive triple barre oblique.

Par exemple:

tsc --outFile index.js main.ts


Cette commande compilera le contenu du fichier main.ts , ainsi que tous les fichiers référencés par la directive triple barre oblique, dans le fichier index.js .

Vous pouvez également spécifier chaque fichier individuellement :

tsc --outFile <JAVASCRIPT_FILE> <TYPESCRIPT_FILE_1> <TYPESCRIPT_FILE_2>


Il est important de noter que la directive triple barre oblique n’est valide que lorsqu’elle est déclarée en haut d’un fichier. Si vous essayez de l’utiliser ailleurs, TypeScript le traitera comme un commentaire normal sur une seule ligne sans signification particulière.

Devriez-vous utiliser des espaces de noms ou des modules ?

Bien que les espaces de noms ne soient pas obsolètes, il est souvent recommandé d’organiser et de gérer votre code à l’aide de modules ES6. Les modules sont plus faciles à maintenir et à gérer et vous pouvez les répartir sur plusieurs fichiers.

De plus, vous pouvez spécifier les relations entre les modules en termes d’importations et d’exportations au niveau du fichier. Les espaces de noms ne peuvent pas définir leurs dépendances.

En fin de compte, le choix entre les espaces de noms et les modules dépendra des besoins et des exigences spécifiques de votre projet, car les deux offrent un moyen précieux d’organiser et de gérer le code dans TypeScript.