TypeScript - เนมสเปซ

เนมสเปซเป็นวิธีการจัดกลุ่มโค้ดที่เกี่ยวข้องอย่างมีเหตุผล สิ่งนี้รวมอยู่ใน TypeScript ซึ่งแตกต่างจาก JavaScript ตรงที่การประกาศตัวแปรเข้าสู่ขอบเขตทั่วโลกและหากมีการใช้ไฟล์ 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