TypeScript 모듈 (export, import)

TypeScript는 정적 타입 검사를 제공하면서도 모듈 시스템을 활용해 코드를 보다 체계적으로 관리할 수 있도록 지원합니다. 이 글에서는 TypeScript에서의 모듈 시스템, 네임스페이스와 모듈의 차이점, 그리고 외부 라이브러리 활용법에 대해 살펴보겠습니다.

모듈 시스템 소개

TypeScript의 모듈 시스템은 JavaScript의 모듈 시스템(import, export)을 기반으로 동작합니다. 모듈은 코드 조각을 독립적으로 분리해 재사용성을 높이고 충돌을 방지할 수 있도록 도와줍니다.

export와 import 사용법

export는 모듈에서 특정 값을 외부로 내보내는 데 사용됩니다. 내보낸 값은 다른 모듈에서 import를 사용하여 가져올 수 있습니다.

기본 export 예시

기본(default)으로 내보낸 값은 가져올 때 이름을 자유롭게 정할 수 있습니다.

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

// app.ts
import addNumbers from './mathUtils';

console.log(addNumbers(5, 3)); // 8

명명된 export 예시

명명된(named) 값은 정의된 이름 그대로 가져와야 합니다.

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

export function multiply(a: number, b: number): number {
  return a * b;
}

// app.ts
import { subtract, multiply } from './mathUtils';

console.log(subtract(10, 4)); // 6
console.log(multiply(3, 5)); // 15

import와 export의 혼합 사용

하나의 모듈에서 기본 export와 명명된 export를 동시에 사용할 수도 있습니다.

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

export const PI = 3.14;

// app.ts
import add, { PI } from './mathUtils';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

---

네임스페이스와 모듈의 차이

네임스페이스(namespace)와 모듈은 코드 구조화를 돕는다는 점에서 비슷하지만, 사용하는 방식과 목적이 다릅니다.

네임스페이스

네임스페이스는 TypeScript에서 동일한 파일 내에서 여러 개의 관련 코드를 그룹화할 때 사용합니다. 주로 전역 환경을 오염시키지 않으면서 코드를 논리적으로 묶는 데 사용됩니다.

namespace UserManagement {
  export interface User {
    id: number;
    name: string;
  }

  export function getUser(id: number): User {
    return { id, name: 'John Doe' };
  }
}

// 사용
const user = UserManagement.getUser(1);
console.log(user.name); // John Doe

모듈

모듈은 파일 단위로 코드를 그룹화하며, 외부와의 통신은 import와 export를 통해 이루어집니다. 모듈은 ES6 표준의 일부이며, 네임스페이스보다 현대적인 방식으로 간주됩니다.

주요 차이점

특징	네임스페이스	모듈
정의	TypeScript 전용	ES6 표준
사용 목적	전역 환경 관리	독립적 코드 그룹화
접근 방식	namespace 키워드	import와 export
파일 구조	하나의 파일 내에서 사용 가능	파일 단위로 구조화

---

외부 라이브러리 사용하기

TypeScript에서 외부 라이브러리를 사용할 때는 해당 라이브러리의 타입 정의 파일이 필요합니다. 대부분의 경우 @types 패키지를 설치하면 됩니다.

예시: lodash 사용하기

1. lodash 설치

npm install lodash
npm install --save-dev @types/lodash

2. lodash 사용

import _ from 'lodash';

const numbers = [10, 20, 30];
const max = _.max(numbers);

console.log(max); // 30

타입 정의 파일 없는 라이브러리 사용

타입 정의 파일이 없는 라이브러리를 사용할 때는 TypeScript의 declare 키워드를 활용해 임시로 타입을 정의할 수 있습니다.

declare module 'untyped-library' {
  const value: any;
  export default value;
}

이후 일반적인 방법으로 모듈을 사용할 수 있습니다.