Typescript 네임스페이스 알아보기

ES6 module 시스템이 등장하며 Typescript Namespace 가 현격히 줄어들었지면 Typescript가  ES6 module 등장전에 어떻게 Typescript 코드 재사용을 이루었는지 이해하기 위해 알아보았다.

 

 

사용법

먼저 아래와 같은 폴더구조를 가진다고 하자. 

 

- base-component.ts

- input-component.ts

- utils.ts

 

base-component.ts 코드

namespace App {
	export abstract class Component { }
}

 

utils.ts 코드

namespace CommonUtils {
	export class StringUtils { }
}

 

위의 코드를 보면 Component 클래스는 같은 네임스페이스안에 Util 클래스는 다른 네임스페이스 안에 설정된것을 볼수 있다.

* 참고로 같은 Namespace에 선언되어있더라도 다른파일에서 사용하기 위해서는 내보내는 변수, 클래스, 함수등에 export 키워드를 붙여줘야한다

 

input-component.ts 코드

/// <reference path="base-component.ts" />
/// <reference path="utils.ts" />

namespace App {

   // 같은 네임스페이스내에 선언된 클래스 사용
   class InputComponent extends Component { }
   
   // 다른 내임스페이스에 선언된 클래스 사용
   CommonUtils.StringUtils.method();
}

사용법은 간단한데 /// <reference path="모듈위치.ts" />

 

이렇게만 하고 Typescript 기본설정으로 하면 파일들이 제각기 따로 생성되기때문에 각각의 파일들을 따로 불러오지 않는 이상 브라우저에서는 사용할수 없다. 그런 경우애 편의를 위해 한파일로 된 파일을 생성할수 있는데 tsconfig.json 에 outFile 옵션을 활성화 한다. outFile 옵션은 amd 혹은 system 모듈일 경우에만 선택가능하니 용도에 맞게 선택한다

{
    "outFile": "./dist/bundle.js",
    "module": "amd"
}

 

그리고 HTML 파일에서는 아래 한파일만 불러오면 된다

<script src="dist/bundle.js"></script>

 

Namespace 의 단점

1. 의존성들이 불러오지 않더라도 오류 메세지를 발생시키지 않고 정상적으로 Javascript 로 Transpile 하는 경우가 생긴다. 이점은 규모가 큰 프론트 엔드 프로젝트가 될수록 치명적 단점으로 작용한다. 

 

 

그렇다면 Namespace 와 Modules 중에 어떤것을 선택해서 선택해야 될까? 이점은 Typescript 팀에서 명확히 가이드 라인을 제시해주었는데 아래 공식문서에 따르면 모던 코드들에 대해 ES Module 을 사용할 것을 권장하고 있다.

It is also worth noting that, for Node.js applications, modules are the default and we recommended modules over namespaces in modern code.

Documentation - Namespaces and Modules