Die Anleitung zu TypeScript Namespaces

Was ist Namespace?
Die Syntax
Zum Beispiel:
Ambient Namespaces

1. Was ist Namespace?

In JavaScript ES6 wird das Schlüsselwort module zum Definieren eines Moduls verwendet. Dadurch können Sie mehrere Module in einer Datei definieren. TypeScript verwendet das namespace-Schlüsselwort mit ähnlicher Syntax und ähnlichen Zwecken.

Lesen Sie den folgenden Artikel, um das Konzept von Modul- und Schlüsselwörtern export/import in TypeScript zu verstehen:
TypeScript Modules

Hinweis: Sowohl die Schlüsselwörter "module" als auch "namespace" können in TypeScript mit ähnlicher Syntax und Verwendung verwendet werden. Die TypeScript-Dokumentation rät jedoch von der Verwendung des Schlüsselworts "module" in TypeScript-Code ab, es sollte nur in JavaScript-Code verwendet werden.

In TypeScript ist das Schlüsselwort "namespace" etwas leistungsfähiger als das Schlüsselwort "module". Sie können ein Modul über mehrere Dateien hinweg mit dem Schlüsselwort "namespace" definieren und das Flag "--outFile" verwenden, wenn Sie möchten, dass sie zur Kompilierzeit in einer einzigen Datei gebündelt werden.

In diesem Artikel verwenden wir den Begriff "namespace". Sie können auch verstehen, dass er dem Konzept des Moduls in JavaScript ähnelt. Grundsätzlich ist "namespace" (sowie Modul) eine Möglichkeit, Variablen, Funktionen, Klassen usw. mit derselben Beziehung in einer logischen Gruppe zu gruppieren. Es hilft uns, die Anwendung einfach zu verwalten und zu warten.

2. Die Syntax

Standardmäßig haben alle in einem Namespace definierten Coderessourcen einen lokalen Geltungsbereich. Dies bedeutet, dass die externe Umgebung nichts davon weiß, es sei denn, sie sind mit dem Schlüsselwort export definiert:

file1.ts

namespace Namespace_Name {
   export let sampleVariable: number = 100;
   export class SampleClass {
      // ...
   }
   export interface SampleInterface {
      // ...
   }
   export function sampleFunction() {
      // ...
   }
   // ...
}

In einer anderen Datei können wir mit folgender Syntax auf die in einen Namespace exportierten Code-Ressourcen zugreifen:

file2.ts

/// <reference path = "./file1.ts" />

Namespace_Name.sampleVariable;
Namespace_Name.sampleFunction();
Namespace_Name.SampleClass;

/// <reference path = "..." />

/// <reference path="..."/> ist eine notwendige Anweisung, um dem Compiler mitzuteilen, wo sich die Namespace-Definitionsdatei befindet.

3. Zum Beispiel:

In diesem Beispiel definieren wir einen Namespace "MathLib" für drei separate Dateien, Math_file1.ts, Math_file2.ts und Math_file3.ts. Verwenden Sie dann den Namespace "MathLib" in der Datei test.ts. Führen Sie schließlich die Anwendung in der NodeJS- und Web aus.

Die Datei Math_file1.ts definiert den Namespace "MathLib" mit einer PI-Konstante:

Math_file1.ts

namespace MathLib {
   export const PI:number = 3.14;
}

Die Datei Math_file2.ts definiert den Namensraum "MathLib" mit der Funktion circleCircumference(radius) zur Berechnung des Kreisumfangs. Diese Funktion verwendet die in der Datei Math_file1.ts definierte PI-Konstante.

Math_file2.ts

/// <reference path="./Math_file1.ts" />

namespace MathLib {
    export function circleCircumference(radius:number):number {
        // Use the PI constant defined in Math_file1.ts
        return 2 * PI * radius;
    }
}

Die Datei Math_file3.ts definiert den Namensraum "MathLib" mit der Klasse Circle und der Funktion circleArea(radius). Diese Datei verwendet die Konstanten und Funktionen, die in den Dateien Math_file1.ts und Math_file2.ts definiert sind.

Math_file3.ts

/// <reference path="./Math_file1.ts" />
/// <reference path="./Math_file2.ts" />

namespace MathLib {  
    export function circleArea(radius: number): number {
        // Use the PI constant defined in Math_file1.ts
        return PI * radius * radius;
    }
    export class Circle {
        radius : number;
        constructor(radius: number) {
            this.radius = radius;
        }
        getArea()  {
            return circleArea(this.radius);
        }
        getCircumference() {
            // Use the function defined in Math_file2.ts
            return circleCircumference(this.radius);
        }
    }
 }

Die Datei test.ts verwendet den Namespace "MathLib".

test.ts

/// <reference path="./Math_file3.ts" />

let circle = new MathLib.Circle(100);

let area = circle.getArea();
let circumference  = circle.getCircumference();

console.log('area = ' + area);
console.log('circumference = ' + circumference);

Kompilieren Sie alle TypeScript-Dateien in JavaScript-Dateien:

tsc

Verwenden Sie als Nächstes das Flag "--outFile", um die Datei test.ts und die von ihr verwendeten Bibliotheken in eine einzige Datei zu kompilieren:

tsc --outFile ./dist/all_in_one.js test.ts

Nach dem Kompilieren erhalten wir die JavaScript-Datei, die so aussehen sollte:

test.js

"use strict";
/// <reference path="./Math_file3.ts" />
let circle = new MathLib.Circle(100);
let area = circle.getArea();
let circumference = circle.getCircumference();
console.log('area = ' + area);
console.log('circumference = ' + circumference);

all_in_one.js

var MathLib;
(function (MathLib) {
    MathLib.PI = 3.14;
})(MathLib || (MathLib = {}));
/// <reference path="./Math_file1.ts" />
var MathLib;
(function (MathLib) {
    function circleCircumference(radius) {
        // Use the PI constant defined in Math_file1.ts
        return 2 * MathLib.PI * radius;
    }
    MathLib.circleCircumference = circleCircumference;
})(MathLib || (MathLib = {}));
/// <reference path="./Math_file1.ts" />
/// <reference path="./Math_file2.ts" />
var MathLib;
(function (MathLib) {
    function circleArea(radius) {
        // Use the PI constant defined in Math_file1.ts
        return MathLib.PI * radius * radius;
    }
    MathLib.circleArea = circleArea;
    var Circle = /** @class */ (function () {
        function Circle(radius) {
            this.radius = radius;
        }
        Circle.prototype.getArea = function () {
            return circleArea(this.radius);
        };
        Circle.prototype.getCircumference = function () {
            // Use the function defined in Math_file2.ts
            return MathLib.circleCircumference(this.radius);
        };
        return Circle;
    }());
    MathLib.Circle = Circle;
})(MathLib || (MathLib = {}));
/// <reference path="./Math_file3.ts" />
var circle = new MathLib.Circle(100);
var area = circle.getArea();
var circumference = circle.getCircumference();
console.log('area = ' + area);
console.log('circumference = ' + circumference);

Und führen Sie dieses Beispiel in der NodeJS-Umgebung aus:

node ./dist/all_in_one.js

Um das Beispiel im Browser auszuführen, erstellen wir die Datei test.html:

test.html

<html>
   <head>
      <script type="module" src="./dist/test.js"></script>
   </head>
   <body>
      <h3>To test, you need to run this file on an HTTP or HTTPS server.
         And see the results on the browser Console.
      </h3>
   </body>
</html>

Diese Datei test.html muss auf einem HTTP- oder HTTPS-Server ausgeführt werden und die Ergebnisse im Fenster Console des Browsers anzeigen.

Erstellen Sie einen einfachen HTTP-Server mit NodeJS

4. Ambient Namespaces

TypeScript Ambients