[Typescript] 20장 타입스크립트 모듈과 네임스페이스

1. 타입스크립트 모듈 

타입스크립트 모듈은 코드의 구조를 분리해 재사용성을 높이고 Javascript 모듈 시스템을 기반으로 타입 지원을 추가해주는 형태입니다. 모듈은 각각 .ts 또는 .tsx 파일이 하나의 모듈로 구성되어 있고, 다른 파일의 함수, 변수, 클래스 등을 가져오거나 내보낼 수 있습니다. 

 

먼저 타입스크립트에서 모듈은 기본적으로 파일 단위로 독립된 스코프를 가집니다

// crack.ts
export class Crack {
    check() {
        console.log("Crack check");
        
    }
}

// main.ts
import { Crack } from './crack';

const OnCrack = new Crack();
OnCrack.check(); // Output: "Crack check"

---

2. 네임스페이스 사용하기 

네임스페이스 키워드를 사용하 하나의 파일 또는 전역에 충돌을 방지하기 위해 아래 방법을 사용할 수 있습니다. 하지만 현재는 사용하고 있지 않는 방식으로 주의를 요합니다.

namespace Animal {
  export class Cat {
    meow() {
      console.log('Cat meows');
    }
  }
}

const myCat = new Animal.Cat();
myCat.meow(); // Output: "Cat meows"

---

3. 불필요한 네임스페이스 

타입스크립트에서는 모듈안에 네임스페이스를 만들 필요가 없습니다 아래는 왜 불필요한지에 대한 예시입니다.

namespace Utils {
  export function sum(a: number, b: number) {
    return a + b;
  }
}

export = Utils;

 

아래는 올바른 방식의 네임스페이스를 사용하는 방법입니다.

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

// main.ts
import { sum } from './utils';

console.log(sum(4, 5)); // Output: 9

---

4. 모듈의 트레이드 오프

모듈의 트레이트오프에는 장점과 단점이 존재합니다 

• 장점
  
  • 전역 오염 방지
  • 모던 번들러와의 호환(Webpack, Vite 등)
  • 의존성 추적 및 트리쉐이킹 가능 
  • 테스트/재사용성 용이
• 단점
  • module, target, esModuleInterop 등 설정에 복잡
  • 디버깅 시 모듈 경로 파악이 필요
  • 순환 참조 발생 시 해결에 복잡성 
  • 작은 파일이 많아질 수록 구조 관리가 어려움

---

GitHub - Koras02/typescript-bloging