[TypeScript] TypeScript의 모듈화

TypeScript에서 모듈화는 코드를 여러 파일로 나누고 필요한 부분만 불러와 사용하는 방법이다.
이는 코드를 더 구조화되고 유지보수하기 쉽게 만들어준다.

TypeScript는 JavaScript의 ES6 모듈 시스템을 기반으로 하며,  import 와  export 를 사용해 모듈을 관리한다.

 

모듈(Module)이란?

TypeScript에서 파일 하나가 하나의 모듈!

파일 내부의 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내거나, 다른 파일에서 가져올 수 있다.

 

export 키워드

Named Export (이름 내보내기)

// math.ts
export const add = (a: number, b: number): number => a + b;
export const subtract = (a: number, b: number): number => a - b;

가져올 땐 import 키워드 사용

// app.ts
import { add, subtract } from './math';

console.log(add(3, 2)); // 5
console.log(subtract(3, 2)); // 1

 

Default Export (기본 내보내기)

모듈에서 하나의 기본 값만 내보낼 때 사용한다.

// logger.ts
export default function log(message: string): void {
  console.log(message);
}

가져오는 파일에서 이름은 자유롭게 정할 수 있다.

// app.ts
import log as logger from './logger';

logger("Hello, TypeScript!"); // "Hello, TypeScript!"

 

Named + Default Export

하나의 파일에서 default export와 named export를 함께 사용 가능하다.

// utils.ts
export default function greet(name: string): string {
  return `Hello, ${name}!`;
}

export const version = "1.0.0";

// app.ts
import greet, { version } from './utils'; // greet가 default

console.log(greet("Alice")); // "Hello, Alice!"
console.log(version); // "1.0.0"

 

import 키워드

다른 모듈에서 내보낸 구성 요소를 가져오는 데 사용한다.

 

Named Import

import { 함수명, 변수명 } from './파일경로';

Default Import

import 함수명 from './파일경로';

Alias 사용

import { 함수명 as 다른이름 } from './파일경로';

 

모든 내보내기 가져오기

import * as MathUtils from './math';

console.log(MathUtils.add(3, 2)); // 5
console.log(MathUtils.subtract(3, 2)); // 1

 

모듈화의 장점

1. 코드 재사용

: 한 번 작성한 코드를 여러 파일에서 재사용 가능

2. 가독성

: 코드를 파일별로 분리하여 더 구조적으로 작성

3. 유지보수

: 파일을 독립적으로 관리할 수 있어 수정이 쉽고 안전

4. 네임스페이스 관리

: 전역 변수 충돌 방지

 

예제

파일 구조

src/
├── math.ts
├── logger.ts
└── app.ts

math.ts

export const add = (a: number, b: number): number => a + b;
export const subtract = (a: number, b: number): number => a - b;

logger.ts

export default function log(message: string): void {
  console.log(message);
}

app.ts

import log from './logger';
import { add, subtract } from './math';

log(`Addition: ${add(3, 2)}`); // "Addition: 5"
log(`Subtraction: ${subtract(3, 2)}`); // "Subtraction: 1"

 

---

그런데 TypeScript에서는 a.ts의 변수나 함수를 b.ts에서도 import, export 없이 사용이 가능하다.

이는 TypeScript가 글로벌 스코프에 있는 모듈을 처리하기 때문이다.

// a.ts
function hello() {
  console.log("Hello from a.ts");
}

// b.ts
hello(); // import 없이 사용 가능

import, export를 사용하지 않으면 모듈로 간주되지 않고, 글로벌 스코프에 포함된다.
이 경우, 파일 내의 모든 변수, 함수, 클래스는 전역적으로 선언된 것처럼 동작하고 다른 파일에서도 암묵적으로 접근이 가능하다.

글로벌 스코프를 사용하게 되면 충돌 가능성, 유지보수 어려움 등의 문제가 있으니, 모듈화를 하여 사용하는 것이 좋다!