[typescript 핸드북] 12. 네임스페이스와 모듈

typescript 핸드북 학습내용 정리
https://typescript-kr.github.io/pages/the-handbook.html

네임스페이스와 모듈

모듈 사용하기

• 모듈에는 코드와 선언 둘 다 포함 될 수 있음
• 모듈은 모듈로더에 대한 의존성이나 ES모듈이 지원하는 런타임을 가지고 있음
• Node.js의 경우 모듈이 기본이 기본적인 방법임
• 모듈 사용을 권장함

네임스페이스 사용하기

• 네임스페이스는 코드를 구성하는 TS만의 고유한 방법
• 전역 네임스페이스에서 JS 객체로 이름 붙여짐
• 모듈과 달리 여러개의 파일을 포괄할 수 있으며, --outFile을 사용해 연결할 수 있음.

네임스페이스와 모듈의 위험성

/// <refrence>를 사용한 모듈

• 모듈 파일을 참조하기 위해 import 문 대신 /// <refrence>구문을 사용하는 실수
• import 경로에 위치한 모듈에 타입 정보를 컴파일러가 어떻게 찾아내는지를 이해해야함
• 컴파일러는 .ts, .tsx를 찾은 다음 적절한 경로에 위치한 .d.ts를 찾음. 특정 파일이 없다면 앰비언트 모듈 선언을 탐색함

/**
 * myModules.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 태그는 앰비언트 모듈(ambient module) 선언이 포함된 선언 파일의 위치를 지정하는 데 필요함.

🤔 모듈이 아닐때만 import를 쓰란 얘기인가??

불필요한 네임스페이스

// 네임스페이스를 사용하던 프로그램을 모듈로 변경한 예
// shapes.ts

export namespace Shapes {
    export class Triangle { /* ... */ }
    export class Square { /* ... */ }
}

최상위 모듈 Shapes는 아무런 의미없이 Trianglerhk Square를 감싸고 있음. 이런점이 혼동을 줌

// shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Shapes.Triangle(); // shapes.Shapes?

• TS 특징 -> 서로 다른 두 개의 모듈이 절대 같은 스코프 안에 이름을 제공하지 않음. 모듈 사용자가 어떤 이름을 할당할지 결정하기 때문에, 네임스페이스 내부에서 내보내는 심벌을 미리 감싸줄 필요가 없음.
• 네임스페이스를 지정하는 일반적인 목적은 구조의 논리적 그룹을 제공하고 이름 충돌을 방지하기 위함임. 모듈 파일 스스로 논리적 그룹을 형성하고 있기때문에 추가적인 모듈 계층을 사용할 필요가 없음

수정된 예

// shapes.ts

export class Triangle { /* ... */ }
export class Square { /* ... */ }

// shapeConsumer.ts

import * as shapes from "./shapes";
let t = new shapes.Triangle();

모듈의 트레이드 오프

• js 파일과 모듈이 일대일 대응인 것처럼, TS는 모듈 소스 파일과 이 파일에서 생성된 js파일도 일대일 대응임
• 이러한 특성으로 어떤 모듈 시스템을 사용하느냐에 따라 여러 파일을 합치는 작업이 불가능할 수 있음
• commonjs 또는 umd가 대상이면 outFile 옵션을 사용할 수 없지만, TS 1.8 이후부터 amd 또는 system 대상으로는 outFile 옵션이 사용가능함