[TypeScript] Namespace, Generic and Custom Module

오늘은 네임스페이스(Namespace), 제네릭(Generic), 사용자 정의 모듈(Custom Module)의 시너지 효과에 대해 알아보겠습니다. 이 강력한 도구는 TypeScript 프로젝트에 구조, 유연성 및 모듈성을 제공합니다. 이 시리즈를 살펴보면서 이러한 기능을 결합하여 코드베이스를 효과적으로 구성, 확장 및 확장할 수 있는 방법을 확인하실 수 있습니다.

Namespace

TypeScript의 네임스페이스는 로직을 명명된 범위로 캡슐화하여 코드를 구성하는 방법을 제공합니다. 네임스페이스는 이름 충돌을 방지하고 대규모 애플리케이션을 구조화하는 데 유용합니다. 네임스페이스는 네임스페이스 키워드를 사용하여 선언합니다.

namespace Geometry {
  export interface Point {
    x: number;
    y: number;
  }

  export function distance(point1: Point, point2: Point): number {
    // 거리 로직 계산
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
  }
}

const p1: Geometry.Point = { x: 0, y: 0 };
const p2: Geometry.Point = { x: 3, y: 4 };
const distance = Geometry.distance(p1, p2);
console.log(distance);

이 예에서 Geometry는 Point 인터페이스와 distance 함수를 포함하는 네임스페이스입니다.

제네릭

앞서 언급했듯이 타입스크립트의 제네릭을 사용하면 다양한 데이터 유형에서 작동할 수 있는 함수와 클래스를 작성할 수 있습니다. 제네릭은 유연성과 유형 안전성을 제공합니다.

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>('Hello, TypeScript!');
// 결과는 문자열 타입입니다.

사용자 정의 모듈

사용자 정의 모듈은 코드를 별도의 파일로 구성하고 각 파일에 모듈을 포함하는 것을 말합니다. 모듈은 모듈식 유지 관리가 가능한 코드베이스를 만드는 데 도움이 됩니다.

두 개의 파일이 있다고 가정해 보겠습니다.

math.ts

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

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

app.ts

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

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

console.log(sum); // Output: 8
console.log(difference); // Output: 2

이 예제에서 math.ts는 덧셈과 뺄셈 함수가 포함된 모듈입니다. app.ts 파일은 이러한 함수를 가져와 사용합니다.

결론

이러한 개념을 결합하면 체계적이고 유연한 타입스크립트 애플리케이션을 구축할 수 있습니다. 네임스페이스는 파일 내에서 코드를 구조화하는 데 도움이 되고, 제네릭은 유연성을 제공하며, 모듈은 여러 파일에 걸쳐 조직화를 가능하게 합니다.