타입스크립트 튜토리얼 namespace

네임스페이스는 연관된 코드를 논리적으로 묶는 방법이다. 변수 선언이 전역 범위로 들어가는 자바스크립트와는 달리 타입스크립트에 내장되어 있다. 동일한 프로젝트 내에서 여러 자바스크립트 파일이 사용되는 경우 동일한 변수를 덮어 쓰거나 잘못 해석할 가능성이 있으므로 자바스크립트에선 "전역 네임스페이스 오염 문제"가 발생한다.

네임스페이스 정의

네임스페이스 정의는 namespace 키워드와 이름으로 시작한다.

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

네임스페이스 바깥에서 접근해야 하는 클래스 또는 인터페이스는 export 키워드로 표시해야 한다.

다른 네임스페이스에서의 클래스 또는 인터페이스 접근을 위한 문법

SomeNameSpaceName.SomeClassName;

만약 분리된 타입스크립트 파일에 첫 네임스페이스가 있다면, 슬래시 3개를 써서 참조되어야 한다.

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

자바스크립트 컴파일

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

자바스크립트 컴파일

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

https://www.tutorialspoint.com/typescript/typescript_namespaces.htm