TypeScript-네임 스페이스

네임 스페이스는 관련 코드를 논리적으로 그룹화하는 방법입니다. 이것은 변수 선언이 전역 범위로 들어가는 JavaScript와 달리 TypeScript에 내장되어 있으며 동일한 프로젝트 내에서 여러 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

컴파일시 아래와 같은 자바 스크립트 코드 (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

컴파일시 아래와 같은 자바 스크립트 코드 (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));

위의 코드가 컴파일되고 실행되면 다음과 같은 결과가 생성됩니다.