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
How to organize code in TypeScript via modules or namespaces
www.typescriptlang.org
'Front-End > Typescript' 카테고리의 다른 글
| 2.03 부터 변화된 타입스크립트 선언 파일(typings) (0) | 2016.10.11 |
|---|---|
| Window 에 Typescript로 객체 추가하기 (0) | 2016.09.21 |