Typescript에서 모듈과 네임스페이스를 사용하여 코드를 구성하는 다양한 방법을 간략하게 설명합니다. 또한 네임스페이와 모듈에 관한 몇 가지 고급 주제와 이를 사용할 때 흔히 마주치는 위험성을 살펴볼 것입니다.
참고: 매우 오래된 버전의 Typescript 네임스페이스는 이전의 Javascript 모듈 시스템인 "내부 모듈" 이라고 불렸습니다.
모듈은 모듈로더(CommonJS / Require.js) 에 대한 의존성이나 ES 모듈이 지원하는 런타임을 가지고 있습니다.
또한 Node.js 애플리케이션의 경우 모듈이 기본적인 방법이며, 코드를 구조화 하는 데 있어 권장하는 접근법이라는 점을 유의해야 합니다.
ECMAScript 2015 부터, 모듈은 언어에서 기본적으로 내재한 부분입니다. 따라서, 새로운 프로젝트의 경우 코드를 구성하는 방법으로 모듈을 권장합니다.
네임스페이스는 간단히 전역 네임스페이스에서 Javascript 객체로 이름 붙여집니다. 이러한 점 덕분에 네임스페이스를 아주 단순한 구조로 사용할 수 있습니다. 모듈과 달리, 여러 개의 파일을 포괄할 수 있으며, --outFile
을 사용해 연결할 수 있습니다.
대규모 애플리케이션의 경우, 이 방법은 모든 전역 네임스페이스가 오염되는 경우와 마찬가지로 컴포넌트의 의존성을 식별하기 힘들게 만들 수 있습니다.
/// <reference>
를 사용한 모듈일반적인 실수는 모듈 파일을 참조하기 위해 import
문 대신 /// <reference>
구문을 사용하는 것입니다. 이 둘의 차이를 이해하기 위해, 우선 import
경로에 위치한 모듈에 대한 타입 정보를 컴파일러가 어떻게 찾아 내는지를 이해해야 합니다.
컴파일러는 .ts
, .tsx
를 찾은 다음 적절한 경로에 위치한 .d.ts
를 찾습니다. 만약 특정 파일을 찾지 못한다면, 컴파일러는 앰비언트 모듈 선언을 탐색할 것입니다. .d.ts
파일안에 이것들을 선언해야 한다는 점을 기억하세요.
myModule.d.ts
// 모듈이 아닌 .d.ts 파일 또는 .ts 파일:
declare module "SomeModule" {
export function fn(): string;
}
myOtherModule.ts
/// <reference path="myModules.d.ts" />
import * as m from "SomeModule";
위의 reference 태그는 앰비언트 모듈 선언이 포함된 선언 파일의 위치를 지정하는 데 필요합니다.