[TypeScript] 모듈

타입스크립트의 모듈 개념

• 모듈은 파일 단위로 분리되며, 각 파일은 기본적으로 자체 스코프를 가집니다.
• 모듈 내에서 선언된 변수, 함수, 클래스는 외부에서 접근이 불가능하며, 명시적으로 export 키워드로 노출해야 합니다.
• 외부에서 사용할 수 있도록 export된 항목은 import 키워드로 가져올 수 있습니다.

---

Export 종류

1. 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 예시

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

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

2. Default Export

하나의 모듈에서 단 하나의 항목만 기본 값으로 내보낼 수 있습니다.

// config.ts
const config = {
  apiKey: '12345',
  apiUrl: 'https://api.example.com',
};

export default config;

Import 예시

import config from './config';

console.log(config.apiKey);

3. Re-export

다른 모듈에서 export된 항목을 다시 내보낼 수 있습니다.

// utilities.ts
export { add, subtract } from './math';

Import 예시

import { add } from './utilities';

console.log(add(1, 1));

---

Import 방식

1. Named Import

필요한 항목만 중괄호를 사용하여 가져옵니다.

import { add } from './math';

2. Default Import

기본 내보내기된 항목은 이름 없이 가져올 수 있으며, 원하는 이름으로 사용할 수 있습니다.

import config from './config';

3. Wildcard Import

모든 내보낸 항목을 객체 형태로 가져올 수 있습니다.

import * as MathUtils from './math';

console.log(MathUtils.add(1, 2));

---

타입스크립트에서 모듈 활용

타입스크립트는 모듈 시스템에서 타입 및 인터페이스도 함께 관리할 수 있어 코드 구조와 타입 안정성을 동시에 관리하기에 매우 유용합니다.

타입과 인터페이스의 Export/Import

// types.ts
export type User = {
  name: string;
  age: number;
};

export interface Product {
  id: number;
  name: string;
}

Import 예시

import { User, Product } from './types';

const user: User = { name: 'Alice', age: 30 };
const product: Product = { id: 1, name: 'Laptop' };

---

✅ 참고

• 타입스크립트 핸드북_typescript-kr
• 타입스크립트 핸드북_Captain Pangyo