namespace

1. 개요

JavaScript의 module이 제대로 발전하기 전, TypeScript에서 코드의 모듈화를 위해 만들어진 문법이다.
ES6부터 esm이라는 module system이 정식으로 등장했기 때문에, TypeScript 공식문서에서도 모듈화를 위해 namespace를 사용하는 것보다 esm을 사용하는 것을 권장하고 있다.

2. 사용

2.1. 기본적 사용법

한 파일 내에서 namespace는 다음과 같이 사용한다.
이때 namespace 내부에서 export되지 않은 구문은 외부에서 이용할 수 없다.

namespace Name {
  export const add = (a: number, b: number) => a + b;
  const sub = (a: number, b: number) => a - b;
}
 
Name.add(1, 2);  // 3
Name.sub(1, 2);  // 사용 불가

선언된 namespace를 외부에서 import하기 위해서는 다음과 같은 import 구문을 이용한다.

// app2.ts
namespace Name {
  export const add = (a: number, b: number) => a + b;
}

// app1.ts
/// <reference path="./app2.ts" />
Name.add(1, 2);  // 3

한 namespace 내부에는 중복된 변수명, 메서드명, 클래스명을 가질 수 없다.
또한 각기 다른 ts 파일에서 동일한 이름의 namespace를 선언한 뒤, 중복된 이름의 변수, 메서드, 클래스를 export 할 수 없다.

// app1.ts
namespace Name {
  export const add = (a: number, b: number) => a + b;  // 에러
}
 
// app2.ts
namespace Name {
  export const add = (a: number, b: number) => a + b;  // 에러
}

2.2 namespace 출력

namespace를 import라는 코드를 그대로 JavaScript로 변환한다면, 변환된 코드는 해당 namespace를 참조할 수 없는 문제점이 생긴다.

// 변환된 JavaScript 코드
/// <reference path="./app2.ts" />
Name.add(1, 2);  // Name을 참조하지 못한다.  

이런 문제점을 해결하기 위해서는 모든 TypeScript 코드를 JavaScript로 변환할 때, 변환된 결과물을 한 개의 파일로 합치는 과정이 필요한데, 이를 위해 tsconfig를 설정할 필요성이 있다.

outfile

{
  "outFile": "./dist.js"
}