[Typescript] TypeScript의 모듈 파일과 전역 모듈의 차이점 및 예제

TypeScript는 자바스크립트에 정적 타입을 도입하여 코드의 안정성과 가독성을 높이게 된다. TypeScript를 사용하면 코드 구조화가 중요한데, 이에 관련하여 모듈 파일과 전역 모듈에 대해 설명하고자 한다. 예제 코드를 통해 이를 이해해보자.

 

1. 전역 모듈과 모듈 파일의 정의

TypeScript에서 파일은 기본적으로 다음 두 가지로 구분된다.

• 전역 모듈: 파일에 아무런 import나 export 문이 없는 경우, 해당 파일은 전역 모듈로 간주된다.
• 모듈 파일: 파일에 import나 export 문이 하나라도 있는 경우, 해당 파일은 모듈 파일로 간주된다.

 

2. 전역 모듈의 특징 및 예제

전역 모듈에서 정의된 요소들은 전역 범위에서 사용할 수 있다. 이 경우, 다른 파일에서 정의된 요소들을 명시적으로 가져올 필요가 없다.  그러나 이 방식은 TypeScript 컴파일 과정에서는 오류가 발생하지 않지만, 실행 시간에 오류가 발생할 수 있다.

예를 들어, 다음과 같은 전역 모듈 파일이 있다고 가정해보자.

 

// globalModule.ts
class GlobalClass {
  public sayHello() {
    console.log("Hello from GlobalClass");
  }
}

다른 파일에서 GlobalClass를 사용하려면, 아무런 import 문 없이 사용할 수 있다. 그러나 런타임에서는 오류가 발생된다.

// main.ts 
const instance = new GlobalClass();
instance.sayHello(); // 출력: Hello from GlobalClass

그러나 전역 모듈을 사용하면 코드 관리가 어려워지고, 이름 충돌이 발생할 가능성이 높아진다. 따라서 권장되지 않는다.

 

3. 모듈 파일의 특징 및 예제

모듈 파일에서 정의된 요소들은 기본적으로 해당 파일 범위 내에서만 사용할 수 있다. 다른 파일에서 이 요소들을 사용하려면, 명시적으로 export해야 하고, 다른 파일에서 이 요소들을 사용하려면 import를 통해 가져와야 한다.

예를 들어, 다음과 같은 모듈 파일이 있다고 가정해보자.

// moduleFile.ts
export class ModuleClass {
	public sayHello() {
		console.log("Hello from ModuleClass"); 
    }
}

 다른 파일에서 ModuleClass를 사용하려면, import를 통해 명시적으로 가져와야 한다.

// main.ts
import { ModuleClass } from "./moduleFile";
const instance = new ModuleClass();
instance.sayHello(); // 출력: Hello from ModuleClass

 

4. 아무 import 문이 없을 때 동작하지 않는 이유

아무 import 문이 없는 경우, 해당 파일은 전역 모듈로 간주되어 해당 파일에서 정의된 요소들이 전역 범위에서 사용 가능하다.

반면에, 파일에 import 문이 있는 경우 해당 파일은 모듈 파일로 간주되어 해당 파일에서 정의된 요소들이 다른 파일에서 사용되지 않게 된다. 이 경우, 다른 파일에서 사용하려면 해당 요소를 export하고 사용하려는 파일에서 import하여야 한다.

이러한 이유로, 아무 import 문이 없는 파일에서는 동작하지만 import 문이 있는 경우 동작하지 않는 상황이 발생할 수 있다.

예를 들어, 다음과 같은 전역 모듈과 모듈 파일이 있다고 가정해보자.

// globalModule.ts
class GlobalClass {
  public sayHello() {
    console.log("Hello from GlobalClass");
  }
}

// moduleFile.ts
export class ModuleClass {
  public sayHello() {
    console.log("Hello from ModuleClass");
  }
}

main.ts 파일에서 아래와 같이 import 문이 없으면, GlobalClass는 사용 가능하지만 ModuleClass는 사용할 수 없다.

// main.ts
const globalInstance = new GlobalClass();
globalInstance.sayHello(); // 런타임 오류: GlobalClass is not defined

const moduleInstance = new ModuleClass(); // 오류: ModuleClass를 찾을 수 없음
moduleInstance.sayHello();

main.ts 파일에서 아래와 같이 ModuleClass를 import하면, 이제 ModuleClass도 사용할 수 있다.

// main.ts
import { ModuleClass } from "./moduleFile";

const globalInstance = new GlobalClass();
globalInstance.sayHello(); // 출력: Hello from GlobalClass

const moduleInstance = new ModuleClass();
moduleInstance.sayHello(); // 출력: Hello from ModuleClass

 

주의사항

TypeScript는 자바스크립트와 호환성을 유지하기 때문에, 자바스크립트의 모듈 시스템이 동작하는 방식에 따라 결과가 다를 수 있다. 실제 프로젝트에서 코드를 작성할 때는 모듈 시스템을 고려하고, 해당 프로젝트의 설정과 환경에 맞게 코드를 작성해야 한다.

이게 무슨 소리냐면 typescript 컴파일러는 오류가 아니라고 인식하는데 실제로 컴파일되서 나온 파일을 실행하면 에러가 난다.

5. 결론

TypeScript에서는 전역 모듈보다 모듈 파일을 사용하여 코드를 구조화하는 것이 좋다. 모듈 파일은 코드의 구조화와 이름 충돌 방지, 재사용 가능한 코드 작성에 도움이 된다.

전역 모듈을 사용할 때 발생할 수 있는 문제를 피하려면, 각 요소를 명시적으로 export하고 import하여 사용하는 모듈 파일을 활용하는 것이 좋다.