유니온 타입(union type)이란?

여러 개의 타입 중 한 개의 타입을 사용하고 싶을 경우 사용하는 문법입니다.

유니온 타입은 중복된 코드를 줄이고, 타입을 더 정확히 선언할 수 있습니다.

유니언 타입의 사용 방법

유니언 타입은 | 연산자를 사용하여 선언하는 방식입니다.

아래 예시 코드에서 문자열, 숫자형 타입 모두 넘기고 싶을때는 유니온 타입을 사용할 수 있습니다.

function logText(text:string | number) {
  console.log(text);
}

logText('hi');
logText(10);

만약 유니언 타입이 없었다면 any 타입을 사용하지 않고서는 아래와 같이 두 개의 함수를 정의해야했을겁니다. 이런 경우 동일한 동작을 하는 함수이지만 타입만이 달라서 코드를 중복해서 작성해야한다는 매우 불편한 단점이 있습니다.

따라서 유니언 타입 사용은 중복된 코드를 줄일 수 있습니다.

function logText(text:string) {
  console.log(text);
}

function logNumber(text:number) {
  console.log(text);
}

logText('hi');
logNumber(10);

만약 유니언 타입을 사용하지 않고 any타입을 사용한다면…

any 타입을 사용하면 정상적으로 동작할 수 있습니다.

하지만 any 타입의 경우에는 모든 타입이 들어갈 수 있기 때문에 예측하지 못할 동작을 할 가능성이 생기며, 이는 타입스크립트를 사용하는 의미가 사라지게 됩니다. 또한, 타입스크립트의 타입이 정해져 있을 때 자동으로 속성과 API를 완성하는 기능을 사용할 수 없습니다.

따라서 유니언 타입 사용은 원하는 타입들 만을 더 정확히 선언할 수 있도록 해줍니다.

function logText(text:any) {
  console.log(text);
}

logText('hi');
logNumber(10);

유니온 타입 사용 주의사항