Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Eine Namenskollision tritt auf, wenn zwei oder mehr Codekomponenten denselben Namen für eine Variable, Funktion oder Klasse verwenden. Sie sind in großen Projekten üblich, in denen viele Personen an derselben Codebasis arbeiten. Sie können es schwierig machen, festzustellen, welche Codekomponente für Fehler verantwortlich ist.

Mithilfe von Namespaces können Sie Ihren Code so organisieren und verwalten, dass Gruppen zusammengehöriger Komponenten unter einem gemeinsamen Bezeichner stehen. Dadurch wird das Risiko von Namenskonflikten verringert.

Erstellen eines Namensraums

Sie können Namespaces in TypeScript mithilfe von erstellen Namensraum Stichwort. Folgen Sie ihm mit einem Bezeichner, um den Namensraum zu benennen, und einem Block, der von geschweiften Klammern eingeschlossen ist. Die Syntax ähnelt der, die Sie verwenden würden Erstellen Sie eine Klasse in JavaScript.

Zum Beispiel:

Namensraum Beispiel {}

Anschließend können Sie Mitglieder des Namensraums – Variablen, Funktionen und Klassen – innerhalb des Namensraumblocks deklarieren:

Namensraum Beispiel {
ExportFunktionFoo(): Leere{
Konsole.Protokoll("Dies ist eine Funktion innerhalb des Beispiel-Namensraums");
 }
ExportKlasse Bar {
 Eigentum: Schnur;


Konstrukteur(Eigentum: Schnur) {
Das.property = Eigenschaft;
 }
 }
Exportkonst baz = "Dies ist eine Namespace-Variable"
}

Im obigen Beispiel Foo, Bar, Und baz sind Mitglieder der Beispiel Namensraum. Standardmäßig können Sie nur auf die Mitglieder eines Namespace innerhalb desselben Namespace zugreifen. Verwenden Sie die Export -Schlüsselwort, um jedes Mitglied des Namensraums außerhalb davon zugänglich zu machen.

Sie können auf alle öffentlich verfügbaren Mitglieder eines Namensraums zugreifen, indem Sie den Mitgliedsnamen des Namensraums in Punktnotation aufrufen:

Beispiel.foo(); // Dies ist eine Funktion innerhalb des Beispiel-Namensraums
konst Balken = neu Beispiel. Bar("Schnur");
Konsole.log (bar.property); // Zeichenkette
Konsole.log (Beispiel.baz); // Dies ist eine Namespace-Variable

Verschachtelung von Namespaces

Mit TypeScript können Sie Namespaces in anderen Namespaces verschachteln, um eine hierarchische Struktur für Ihren Code zu erstellen. Das Verschachteln von Namespaces kann das Risiko von Namenskollisionen weiter verringern, indem verwandte Namespaces unter einem gemeinsamen Bezeichner gruppiert werden.

Zum Beispiel:

Namensraum Beispiel {
Exportkonst Eigenschaft_1 = "Foo";
ExportNamensraum Bar {
Exportkonst printFoo = Funktion () {
Konsole.log (Eigenschaft_1);
 };
 }


ExportNamensraum Baz {
ExportKlasse Foo {
 Eigentum: Schnur;
Konstrukteur(Eigentum: Schnur) {
Das.property = Eigenschaft;
 }
 }
 }
}

Der obige Codeblock ist ein Beispiel für einen verschachtelten Namespace. Der Beispiel Namespace ist der Namespace der obersten Ebene, der die enthält Bar Namensraum und die Baz Namensraum.

Sie können auf die Eigenschaften in einem verschachtelten Namespace zugreifen, indem Sie die Punktnotation verwenden, die der von Ihnen erstellten hierarchischen Struktur folgt.

Zum Beispiel:

Konsole.log (Beispiel.property_1); // Foo
Beispiel. Bar.printFoo() // Foo
konst foo = neu Beispiel. Baz. Foo ("Beispiel")

Dieser Beispielcode greift über den übergeordneten Namespace auf jedes Mitglied des Namespace zu. Der direkte Zugriff auf eine Eigenschaft statt über ihren übergeordneten Namensraum würde einen Fehler auslösen:

Beispiel.printFoo()
// error TS2339: Property 'printFoo' existiert nicht auf Typ 'typeof Example'

Obwohl verschachtelte Namespaces Ihnen helfen können, Ihren Code zu organisieren, können tief verschachtelte Namespaces den gegenteiligen Effekt haben. Tief verschachtelte Namespaces erschweren das Lesen und Verwalten Ihres Codes.

Namespace-Aliase

Ein Namespace-Alias ​​ist ein abgekürzter Name, der einem Namespace-Mitglied gegeben wird, wodurch es einfacher zu referenzieren ist.

Sie können einen Namespace-Alias ​​mithilfe von erstellen importieren Schlüsselwort gefolgt von dem Namen, den Sie dem Alias ​​zuweisen möchten. Weisen Sie dann die zu importieren -Schlüsselwort und den Aliasnamen für ein Namespace-Mitglied.

Zum Beispiel:

Namensraum Auto {
ExportNamensraum Tesla {
ExportKlasse ModellX {
 erstellen(): Schnur {
zurückkehren„Modell X erstellt“.
 }
 }
 }
ExportNamensraum Toyota {
ExportKlasse Camry {}
 }


ExportNamensraum Ford {
ExportKlasse Mustang {}
 }
}


// Erstellen des Alias
importieren Tesla = Auto. Tesla
konst Modell X = neu Tesla. ModellX()
modelX.create() // Modell X erstellt

In diesem Beispiel wird ein Alias ​​für die erstellt Auto. Tesla Namensraum. Sie können diesen Alias ​​verwenden, um auf die Eigenschaften von zuzugreifen Tesla Namespace, wie die ModelX-Klasse, einfacher.

Namespaces in mehreren Dateien verwenden

Um einen Namensraum in einer anderen Datei zu verwenden, müssen Sie ihn importieren. Das Importieren von Namespaces unterscheidet sich vom Importieren von Variablen, Funktionen, Klassen usw. Abhängig von Ihrem Projekt Modulsystem, Sie können sie entweder mit der importieren erfordern oder der importieren Stichwort.

Sie können Namespaces jedoch nur mit der Triple-Slash-Direktive importieren, bei der es sich um einen einzeiligen Kommentar handelt, der ein XML-Tag enthält.

Zum Beispiel:

// main.ts
/// 
Beispiel.foo()

Dieses Beispiel verwendet die Direktive Triple Slash innerhalb von a main.ts Datei. Die Richtlinie verweist auf die index.ts Datei, die die enthält Beispiel Namensraum. Ohne Import ist der Namespace nur in derselben Datei verfügbar, die ihn definiert.

Nach Verweis auf die index.ts Datei können Sie auf die zugreifen Beispiel Namespace und seine öffentlich verfügbaren Mitglieder. Rufen Sie zum Beispiel die an foo Methode auf der Beispiel Namensraum.

Sobald Sie mehrere Dateien verwenden, müssen Sie sicherstellen, dass TypeScript den gesamten erforderlichen Code kompiliert und lädt. Sie können dies tun, indem Sie die Ausgabe des TypeScript-Compilers mithilfe von verketten outFile Möglichkeit. Dadurch werden dann alle Eingabedateien in eine einzige JavaScript-Ausgabedatei kompiliert. Die allgemeine Syntax zum Ausführen des Compilers lautet wie folgt:

tsc --outFile

Ersetzen mit dem Namen Ihrer Ziel-JavaScript-Datei. Ersetzen durch den Namen der TypeScript-Datei, die die Triple-Slash-Direktive enthält.

Zum Beispiel:

tsc --outFile index.js main.ts

Dieser Befehl kompiliert den Inhalt der main.ts Datei zusammen mit allen Dateien, auf die von der Triple-Slash-Direktive verwiesen wird, in die index.js Datei.

Alternativ können Sie jede Datei einzeln angeben:

tsc --outFile

Es ist wichtig zu beachten, dass die Triple-Slash-Direktive nur gültig ist, wenn sie am Anfang einer Datei deklariert wird. Wenn Sie versuchen, es an anderer Stelle zu verwenden, behandelt TypeScript es als normalen einzeiligen Kommentar ohne besondere Bedeutung.

Sollten Sie Namespaces oder Module verwenden?

Obwohl Namespaces nicht veraltet sind, wird häufig empfohlen, Ihren Code mithilfe von ES6-Modulen zu organisieren und zu verwalten. Module sind einfacher zu warten und zu verwalten, und Sie können sie über mehrere Dateien erstrecken.

Darüber hinaus können Sie die Beziehungen zwischen Modulen in Bezug auf Importe und Exporte auf Dateiebene festlegen. Namespaces können ihre Abhängigkeiten nicht definieren.

Letztendlich hängt die Wahl zwischen Namespaces und Modulen von den spezifischen Bedürfnissen und Anforderungen Ihres Projekts ab, da beide eine wertvolle Möglichkeit bieten, Code in TypeScript zu organisieren und zu verwalten.