Typescript-namespaces

提供:Dev Guides
移動先:案内検索

TypeScript-名前空間

名前空間は、関連するコードを論理的にグループ化する方法です。 これは、変数宣言がグローバルスコープに入るJavaScriptとは異なり、TypeScriptに組み込まれています。同じプロジェクト内で複数のJavaScriptファイルが使用されると、同じ変数を上書きまたは誤って構築する可能性があり、 JavaScript。

名前空間の定義

名前空間の定義は、次のようにキーワード namespace で始まり、その後に名前空間名が続きます-

namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }
   export class SomeClassName {      }
}

名前空間の外部からアクセスする必要のあるクラスまたはインターフェースは、キーワード export でマークする必要があります。

別のネームスペースのクラスまたはインターフェースにアクセスするための構文は、namespaceName.classNameになります

SomeNameSpaceName.SomeClassName;

最初の名前空間が別のTypeScriptファイルにある場合、トリプルスラッシュ参照構文を使用して参照する必要があります。

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

次のプログラムは、名前空間の使用を示しています-

FileName :IShape.ts
----------
namespace Drawing {
   export interface IShape {
      draw();
   }
}

FileName :Circle.ts
----------
///<reference path = "IShape.ts"/>
namespace Drawing {
   export class Circle implements IShape {
      public draw() {
         console.log("Circle is drawn");
      }

      FileName :Triangle.ts
      ----------
     ///<reference path = "IShape.ts"/>
      namespace Drawing {
         export class Triangle implements IShape {
            public draw() {
               console.log("Triangle is drawn");
            }
         }

         FileName : TestShape.ts
        ///<reference path = "IShape.ts"/>
        ///<reference path = "Circle.ts"/>
        ///<reference path = "Triangle.ts"/>
         function drawAllShapes(shape:Drawing.IShape) {
            shape.draw();
         }
         drawAllShapes(new Drawing.Circle());
         drawAllShapes(new Drawing.Triangle());
      }
   }
}

上記のコードは、次のコマンドを使用してコンパイルおよび実行できます-

tsc --out app.js TestShape.ts

node app.js

コンパイル時に、次のJavaScriptコード(app.js)が生成されます。

//Generated by typescript 1.8.10
///<reference path = "IShape.ts"/>
var Drawing;
(function (Drawing) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn");
      };
      return Circle;
   }());

   Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));

///<reference path = "IShape.ts"/>
var Drawing;
(function (Drawing) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn");
      };
      return Triangle;
   }());
   Drawing.Triangle = Triangle;
})(Drawing || (Drawing = {}));

///<reference path = "IShape.ts"/>
///<reference path = "Circle.ts"/>
///<reference path = "Triangle.ts"/>
function drawAllShapes(shape) {
   shape.draw();
}

drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

上記のコードをコンパイルして実行すると、次の結果が生成されます-

Circle is drawn
Triangle is drawn

入れ子になった名前空間

次のように、別のネームスペース内にあるネームスペースを定義できます-

namespace namespace_name1 {
   export namespace namespace_name2 {
      export class class_name {    }
   }
}

次のようにドット(。)演算子を使用して、ネストされた名前空間のメンバーにアクセスできます-

FileName : Invoice.ts
namespace tutorialPoint {
   export namespace invoiceApp {
      export class Invoice {
         public calculateDiscount(price: number) {
            return price *.40;
         }
      }
   }
}
FileName: InvoiceTest.ts

///<reference path = "Invoice.ts"/>
var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

上記のコードは、次のコマンドを使用してコンパイルおよび実行できます-

tsc --out app.js InvoiceTest.ts
node app.js

コンパイル時に、次のJavaScriptコード(app.js)が生成されます。

//Generated by typescript 1.8.10
var tutorialPoint;
(function (tutorialPoint) {
   var invoiceApp;
   (function (invoiceApp) {
      var Invoice = (function () {
         function Invoice() {
         }
         Invoice.prototype.calculateDiscount = function (price) {
            return price* .40;
         };
         return Invoice;
      }());
      invoiceApp.Invoice = Invoice;
   })(invoiceApp = tutorialPoint.invoiceApp || (tutorialPoint.invoiceApp = {}));

})(tutorialPoint || (tutorialPoint = {}));
///<reference path = "Invoice.ts"/>

var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

上記のコードをコンパイルして実行すると、次の結果が生成されます-

200