[TypeScript] Union, Literal, Tagged Types

이번 글에서는 타입 정의의 정확성과 표현력을 높여주는 Union 타입, Literal 타입, Tagged 타입에 대해 살펴봅니다. 이러한 기능을 이해하면 더욱 강력하고 미묘한 타입 시스템을 만들 수 있습니다. TypeScript의 고급 유형 기능의 세계를 탐색하는 이 여정에 함께하세요.

 

1. Union Types

Union 타입은 변수가 두 가지 이상의 타입을 가질 수 있게 해줍니다. 연산자를 사용하여 유형을 결합할 수 있습니다.

type Result = number | string;

function displayResult(result: Result): void {
  console.log(result);
}

displayResult(42); // Output: 42
displayResult('hello'); // Output: hello

이 예제에서 Result는 숫자나 문자열일 수 있습니다.

 

2. Literal Types

Literal 타입을 사용하면 변수가 가질 수 있는 정확한 값을 지정할 수 있습니다. 문자열 리터럴, 숫자 리터럴, 부울 리터럴 등과 함께 사용할 수 있습니다.

type Direction = 'up' | 'down' | 'left' | 'right';

function move(direction: Direction): void {
  console.log(`Moving ${direction}`);
}

move('up'); // Output: Moving up
move('right'); // Output: Moving right

여기서 Direction은 특정 문자열 "up", "down", "left" 또는 "right"를 나타내는 리터럴 타입입니다.

 

3. Tagged Union Types

Tagged Union 타입은 값이 여러 타입 중 하나일 수 있고 공통 속성(태그)으로 구분하려는 시나리오를 모델링하는 데 자주 사용됩니다.

interface Square {
  kind: 'square';
  size: number;
}

interface Circle {
  kind: 'circle';
  radius: number;
}

type Shape = Square | Circle;

function area(shape: Shape): number {
  if (shape.kind === 'square') {
    return shape.size * shape.size;
  } else {
    return Math.PI * shape.radius * shape.radius;
  }
}

const mySquare: Square = { kind: 'square', size: 4 };
const myCircle: Circle = { kind: 'circle', radius: 3 };

console.log(area(mySquare)); // Output: 16
console.log(area(myCircle)); // Output: 28.274333882308138

이 예제에서 Shape는 두 가지 가능한 모양을 가진 Tagged 유니온 유형입니다: Square과 Circle입니다. kind 속성은 두 도형을 구분하는 태그 역할을 합니다.

 

결론

이러한 기능은 표현력이 풍부하고 정확한 유형 정의를 생성할 수 있는 강력한 도구를 제공하여 코드에서 특정 패턴을 캡처하고 적용할 수 있게 해줍니다.