TypeScript에서 모듈과 네임스페이스는 코드를 구조화하고 재사용 가능한 요소를 만드는데 유용합니다. 이번 글에서는 모듈과 네임스페이스를 효율적으로 활용하는 몇 가지 방법을 소개하겠습니다.

모듈 vs 네임스페이스

TypeScript에서 모듈은 파일 수준의 스코프를 제공하며, 외부에서 접근할 수 있는 요소를 명시적으로 공개해야 합니다. 반면에 네임스페이스는 객체를 사용하여 구조화하고, 라이브러리나 모듈 간의 이름 충돌을 방지하는 데 유용합니다.

모듈 사용 시 주의할 점

모듈을 사용할 때에는 외부로 공개할 요소를 명시적으로 설정해야 합니다. export 키워드를 사용하여 외부로 공개할 함수, 변수, 클래스 등을 지정하고, 모듈을 import하여 필요한 요소를 가져와 사용할 수 있습니다.

// math.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// main.ts
import { sum } from './math';
console.log(sum(3, 5)); // 출력: 8

네임스페이스 사용 시 주의할 점

네임스페이스를 사용할 때는 namespace 키워드를 사용하여 네임스페이스를 정의하고, export 키워드를 사용하여 외부로 공개할 요소를 설정합니다. 또한, 외부에서 사용할 때에는 네임스페이스를 접두어로 붙여 사용해야 합니다.

// shapes.ts
namespace Shapes {
  export function square(x: number): number {
    return x * x;
  }
}

// main.ts
console.log(Shapes.square(5)); // 출력: 25

모듈과 네임스페이스의 조합 활용

다수의 모듈을 조합하여 라이브러리를 생성할 때, 네임스페이스를 활용하여 모듈을 구조화하고 이름 충돌을 방지할 수 있습니다.

// math.ts
export namespace MathLib {
  export function sum(a: number, b: number): number {
    return a + b;
  }
}

// geometry.ts
export namespace GeometryLib {
  export function areaOfCircle(radius: number): number {
    return Math.PI * radius * radius;
  }
}

// app.ts
import { MathLib } from './math';
import { GeometryLib } from './geometry';
console.log(MathLib.sum(3, 5)); // 출력: 8
console.log(GeometryLib.areaOfCircle(3)); // 출력: 28.274333882308138

모듈과 네임스페이스는 TypeScript의 강력한 기능으로 코드를 모듈화하고 구조화할 때 유용하게 활용할 수 있습니다.

결론

이번 글에서는 TypeScript에서 모듈과 네임스페이스를 효율적으로 사용하는 방법을 살펴보았습니다. 모듈과 네임스페이스는 코드 구조화 및 재사용성을 높이는 데 유용한 도구이며, 적절히 활용함으로써 더 나은 코드를 작성할 수 있습니다.

더 많은 정보를 원하시면 TypeScript 공식 문서를 참고하세요.