[TypeScript]유니온 타입(Union Type)

Union Type

Union Type은 TypeScript의 기능 중 하나이며 변수의 값이 여러 타입을 가지는 경우 주로 사용됩니다. 예를 들어서 변수 age는 나이를 의미하며 나이는 숫자이므로 number 타입으로 정의할 수 있습니다.

let age: number;

age = 10;

하지만, BackEnd에서 매핑되는 데이터가 문자열이거나 혹은 Web 브라우저에서 입력한 값이 문자열인 경우 변수 age는 string 타입 가능해야 합니다.

 

위 상황처럼 변수에 여러 타입을 정의해야 하는 경우 Union Type을 사용합니다. Union Type은 타입 사이에 파이프( | ) 기호를 사용하여 정의합니다.

let age: number | string;

age = 10;
age = '15';

 

Union Type은 다음 코드처럼 any 타입으로 대체할 수 있습니다.

let age: any;

age = 10;
age = '15';

하지만, any 타입은 장점보다 단점이 많으며 타입을 추론할 수 없는 경우 사용되므로 상황에 맞게 사용하는 것을 권장합니다.

반응형

---

문자열 리터럴(Literal) 타입에 Union Type 적용

Union Type은 주로 문자열 리터럴에서 사용됩니다.

 

다음은 문자열 Red, Black, White만 허용하며 색상을 의미하는 타입입니다.

type Color = "Red" | "Black" | "White";

let color: Color;
color = "Red";

Color 타입에 존재하지 않은 값을 할당하는 경우 다음과 같은 오류를 확인할 수 있습니다.

---

열거형(enum)과 union type의 차이점

얼핏 보면 union type은 열거형(enum)은 동일하게 보이지만 몇 가지 차이점이 있습니다.

• Union Type은 컴파일 타임에만 존재하고 열거형은 컴파일 타임, 런타임에 존재합니다.
• Union Type은 모든 타입의 열거형이고 열거형은 문자열 또는 숫자의 열거형입니다.

TypeScript는 컴파일러이므로 런타임 시점에 Union type은 존재하지 않습니다. TypeScript에서 다음 코드를 작성하면, 컴파일하면서 Union Type인 Color는 사라집니다.

type Color = "Red" | "Black" | "White";

console.log(Color);

오류 내용

 

반면에 열거형(enum)은 JavaScript 객체의 별칭이므로 런타임에 오류 없이 동작합니다.

enum Color {
  Red,
  Green,
  Blue,
}

console.log(Color);

따라서 값을 반복하거나 값을 사용해야 하는 경우 Union type보다 열거형(enum)이 더 나은 방법이 될 수 있습니다.