코드를 재사용하고 관리하기 위해서는 모듈과 네임스페이스를 효과적으로 활용하는 것이 중요합니다. 타입스크립트에서는 다양한 방법을 통해 모듈과 네임스페이스를 사용하여 코드를 구조화하고 재사용성을 높일 수 있습니다.

모듈과 네임스페이스란?

• 모듈: 관련된 코드를 논리적으로 그룹화하고 내보내거나 가져올 수 있는 단위로, 파일 단위로 구성됩니다. 타입스크립트에서는 export 키워드를 사용하여 외부에서 접근 가능한 모듈 멤버를 정의할 수 있습니다.

• 네임스페이스: 전역 스코프의 오염을 방지하기 위해 관련된 코드를 논리적으로 그룹화하는데 사용됩니다. 네임스페이스는 namespace 키워드를 사용하여 정의하며, 모든 멤버는 해당 네임스페이스 내에 존재합니다.

모듈 활용하기

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

export function subtract(a: number, b: number): number {
  return a - b;
}

// main.ts
import { sum, subtract } from "./mathUtils";

console.log(sum(5, 3)); // 8
console.log(subtract(5, 3)); // 2

위 예시에서 mathUtils.ts 파일에서 sum과 subtract 함수를 내보내어(export) main.ts에서 해당 함수들을 불러와(import) 사용할 수 있습니다.

네임스페이스 활용하기

// geometry.ts
namespace Geometry {
  export interface Point {
    x: number;
    y: number;
  }

  export function distanceBetweenPoints(p1: Point, p2: Point): number {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
  }
}

// main.ts
/// <reference path="geometry.ts" />

const p1: Geometry.Point = { x: 0, y: 0 };
const p2: Geometry.Point = { x: 3, y: 4 };

console.log(Geometry.distanceBetweenPoints(p1, p2)); // 5

위 예시에서 geometry.ts 파일에서 Geometry 네임스페이스 안에 Point 인터페이스와 distanceBetweenPoints 함수를 정의하였고, main.ts에서 /// <reference path="geometry.ts" />을 사용하여 해당 네임스페이스를 참조하여 활용하였습니다.

이처럼 모듈과 네임스페이스는 코드의 구조화와 재사용성을 높이는 데 유용한 도구로 활용될 수 있습니다.

참고 자료:

• 타입스크립트 공식 문서