TypeScript 모듈을 생성하고 사용하는 방법

TypeScript 모듈은 코드를 구성하고 관리하는 데 구조화된 접근 방식을 제공합니다. 모듈을 사용하면 코드를 별도의 파일에 캡슐화할 수 있어 유지 관리성, 재사용성 및 테스트성이 향상됩니다. 이 가이드에서는 TypeScript 모듈을 만들고 사용하는 프로세스를 설명합니다.

TypeScript 모듈이란?

TypeScript 모듈은 클래스, 함수, 변수와 같은 코드 요소를 내보내고 가져오는 개별 파일입니다. 모듈을 사용하면 코드를 관리하기 쉬운 조각으로 나눌 수 있어 코드의 다른 부분 간의 상호 작용을 더 잘 제어할 수 있습니다.

TypeScript 모듈 생성

TypeScript 모듈을 만들려면 다음 단계를 따라야 합니다.

TypeScript 파일을 만듭니다. 먼저 모듈에 대한 새 `.ts` 파일(예: `mathUtils.ts`)을 만듭니다.
코드 정의 및 내보내기: 이 파일 내에서 함수, 클래스 또는 변수를 구현하고 export 키워드를 사용하여 다른 모듈에서 사용할 수 있도록 합니다.

간단한 모듈의 예:

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

이 예에서 `add` 및 `subtract` 함수는 `mathUtils.ts` 모듈에서 정의되고 내보내집니다.

TypeScript 모듈 가져오기 및 사용

TypeScript 모듈의 코드를 다른 파일에 활용하려면 가져와야 합니다. 여기에는 다음이 포함됩니다.

새로운 TypeScript 파일을 만듭니다. `app.ts`와 같이 모듈의 코드가 사용될 파일을 생성합니다.
모듈 가져오기: import 키워드를 사용하여 모듈에서 함수, 클래스 또는 변수를 가져옵니다.

`add` 및 `subtract` 함수를 가져오고 사용하는 예:

// app.ts

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

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

이 예제에서는 `add` 및 `subtract` 함수가 `mathUtils` 모듈에서 가져와 `app.ts` 파일 내에서 사용됩니다.

기본 및 명명된 내보내기

TypeScript 모듈은 기본 내보내기와 명명된 내보내기를 모두 지원합니다. 간략한 개요는 다음과 같습니다.

기본 내보내기: export default을 사용하여 단일 값을 모듈의 기본 내보내기로 내보낼 수 있습니다.
명명된 내보내기: 명명된 내보내기를 사용하여 export 키워드로 모듈에서 여러 값을 내보낼 수 있습니다.

두 가지 유형의 내보내기를 보여주는 예:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

이 예에서 `Circle`은 기본 내보내기로 내보내지고, `getCircleInfo`는 명명된 내보내기입니다.

프로젝트에서 모듈 구성하기

여러 모듈이 있는 대규모 프로젝트의 경우, 조직이 중요해집니다. 다음 팁을 고려하세요.

디렉토리 구조: `models/`, `services/`, `utils/`와 같은 디렉토리에 관련 모듈을 그룹화합니다.
인덱스 파일: 디렉토리에서 `index.ts` 파일을 사용하여 모듈을 집계하고 다시 내보내 프로젝트 전체에서 가져오기를 간소화합니다.

디렉토리 구조 예:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

결론

TypeScript 모듈은 코드를 구성하고 관리하는 데 중요한 기능입니다. 모듈을 만들고 사용하면 코드를 모듈화하고 유지 관리하며 확장 가능하게 유지할 수 있습니다. 코드를 내보내고 가져오는 방법과 프로젝트를 구성하는 방법을 이해하면 TypeScript 개발의 효과가 향상됩니다.

타입스크립트 모듈 내보내기 가져오기 함수 클래스 변수 코드 파일 기본값 명명됨 조직 프로젝트 설정