📌  相关文章
📜  TypeScript-命名空间

📅  最后修改于: 2020-10-19 03:56:45             🧑  作者: Mango

命名空间是对相关代码进行逻辑分组的一种方法。这是内置在TypeScript中的，而JavaScript中的变量声明进入了全局范围，而如果在同一项目中使用多个JavaScript文件，则有可能会覆盖或错误解释相同的变量，这将导致“全局命名空间污染问题”。 JavaScript。

定义命名空间

命名空间定义以关键字命名空间开头，后跟命名空间名称，如下所示：

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

应该在名称空间之外访问的类或接口应该用关键字export标记。

要访问另一个名称空间中的类或接口，语法将为namespaceName.className

SomeNameSpaceName.SomeClassName;

如果第一个名称空间在单独的TypeScript文件中，则应使用三斜杠引用语法对其进行引用。

///

以下程序演示了名称空间的使用-

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

FileName :Circle.ts 
---------- 
///  
namespace Drawing { 
   export class Circle implements IShape { 
      public draw() { 
         console.log("Circle is drawn"); 
      }  
      
      FileName :Triangle.ts 
      ---------- 
      ///  
      namespace Drawing { 
         export class Triangle implements IShape { 
            public draw() { 
               console.log("Triangle is drawn"); 
            } 
         } 
         
         FileName : TestShape.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
/// 
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 = {}));

/// 
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 = {}));

/// 
/// 
/// 
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 

/// 
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 = {}));
/// 

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

编译并执行上述代码后，将产生以下结果-

200