모듈과 import/export

기본 패턴

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

// main.ts
import { add } from "./math";

설명

• TypeScript는 JavaScript의 모듈 시스템을 그대로 따르며, 파일 간 의존성을 import와 export로 명시합니다.
• 모듈은 전역 오염을 줄이고, 파일 단위 경계를 분명히 하며, 빌드 도구와 정적 분석이 이해하기 쉬운 구조를 만듭니다.
• TypeScript에서는 값 import뿐 아니라 타입 import도 구분해 사용할 수 있어, 런타임 번들에 불필요한 흔적을 줄이는 데 도움이 됩니다.
• 모듈 설정은 코드 문법만으로 끝나지 않고, module, moduleResolution, 실행 환경(Node, 브라우저, 번들러)와도 연결됩니다.
• 그래서 import/export를 이해할 때는 문법뿐 아니라 "내 코드가 어디서 어떻게 실행되는가"까지 같이 봐야 합니다.

짧은 예제

// user.ts
export interface User {
  id: number;
  name: string;
}

// app.ts
import type { User } from "./user";

빠른 정리

주의할 점