유니언 타입 ( Union Types )

타입스크립트에서 Union 타입은 하나의 변수나 파라미터가 여러 타입 중 하나를 가질 수 있게 해주는 기능이다. 수학의 합집합과 비슷한 개념으로, 다양한 상황에서 타입의 유연성을 높여준다.

 

1. Union 타입 기본 문법

Union 타입은 |(파이프) 기호를 사용해 여러 타입을 나열한다.

let userId: string | number;

userId = "abc123"; // 가능
userId = 100;      // 가능
userId = true;     // 오류: boolean 타입은 할당 불가

 

2. 함수 파라미터에 Union 타입 활용

함수의 매개변수에 Union 타입을 지정하면 다양한 타입의 인자를 받을 수 있다.

function printUserId(id: string | number) {
  console.log(id);
}

printUserId("user1"); // OK
printUserId(42);      // OK
printUserId({});      // 오류: 객체는 허용되지 않음

 

3. 타입 내로잉(Type Narrowing)과 Union 타입

Union 타입을 사용할 때는 타입을 좁혀서 안전하게 코드를 작성해야 한다.

function processValue(value: string | number): string {
  if (typeof value === "string") {    // 타입이 string 일 경우
    return value.toUpperCase();
  } else {                            // 그외의 경우
    return value.toString().toUpperCase();  // string 타입으로 변경 후 매서드 적용
  }
}

TIP: typeof를 활용해 런타임에 타입을 구분하고, 각 타입에 맞는 메서드를 사용할 수 있다.

 

4. 배열에서의 Union 타입

배열 요소가 여러 타입을 가질 수 있도록 할 때도 Union 타입을 사용한다.

let mixedValues: (string | number)[] = [];

mixedValues.push("hello"); // OK
mixedValues.push(123);     // OK
mixedValues.push(true);    // 오류: boolean 타입은 허용되지 않음

 

5. 리터럴(Literal)과 Union 타입

특정 값만 허용하고 싶을 때 리터럴 타입과 Union을 조합해 사용한다.

function toggle(option: "on" | "off") {
  console.log(option);
}

toggle("on");  // OK
toggle("off"); // OK
toggle("yes"); // 오류: 허용되지 않은 값

 

6. 타입 별칭(Type Alias)과 Union 타입

여러 타입이나 리터럴을 묶어서 별칭으로 재사용할 수 있다.

type Size = "xs" | "sm" | "md" | "lg" | "xl";

let tShirtSize: Size;
tShirtSize = "md";  // OK
tShirtSize = "xxl"; // 오류: 정의되지 않은 값

 

7. 실전 예제: HTTP 응답 코드 제한

type SuccessCode = 200 | 201 | 202;
type ErrorCode = 500 | 501 | 503;
type ResponseCode = SuccessCode | ErrorCode;

let responseCode: ResponseCode;
responseCode = 200; // OK
responseCode = 503; // OK
responseCode = 404; // 오류: 정의되지 않은 코드