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

유니온 타입(Union Type)이란?

자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입

하나의 변수나 함수가 여러 개의 타입을 가질 수 있게 하는 기능이다.

function getData(value: string | number) {
  // ...
}

 

유니온 타입 쓰는 이유

코드의 안정성과 가독성을 높이기 위해서이다.

아래와 같이 any 타입을 사용하는 경우 타입스크립트의 타입 추론 기능을 상실하게 되어 코드 작성 중 실수를 쉽게 잡아내지 못할 수 있다. 반면 유니온 타입을 사용하면 특정 타입에 대해 명확한 조건 검사를 통해 타입 안전성을 유지할 수 있다.

// any를 사용하는 경우
function getData(value: any) {
  value.toFixe(); // 에러 발생, age의 타입이 any로 추론되기 때문에 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않는다.
  return value;
}

// 유니온 타입을 사용하는 경우
function getData(value: number | string) {
  if (typeof value === 'number') {
    value.toFixed(); // 정상 동작, value의 타입이 `number`로 추론되기 때문에 숫자 관련된 API를 쉽게 자동완성 할 수 있다.
    return value;
  }
  if (typeof value === 'string') {
    return value;
  }
  return new TypeError('value must be number or string');
}

 

 

유니온 타입과 인터페이스 사용 시 주의할 점

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: string;
}

function introduce(someone: Person | Developer) {
  console.log(someone.name); // O 정상 동작
  console.log(someone.age); // X 타입 오류
  console.log(someone.skill); // X 타입 오류
}

 

introduce 함수의 파라미터 타입을 Person과 Developer 인터페이스의 유니온 타입으로 정의했다.

유니온 타입은 "A도 될 수 있고 B도 될 수 있는" 타입이기 때문에, 함수 안에서 모든 속성을 사용할 수 있을 것 같지만, 타입스크립트는 Person 타입일지 Developer 타입일지 알 수 없으므로 공통 속성인 name만 접근할 수 있다.

 

해결방안

따라서 introduce 함수 안에서는 타입 가드(Type Guard)를 이용하여 타입의 범위를 좁혀야한다.

function introduce(someone: Person | Developer) {
  if ('age' in someone) {
    console.log(someone.age); // O 정상 동작
  }
  if ('skill' in someone) {
    console.log(someone.skill); // O 정상 동작
  }
}

유니온 타입을 사용할 때 타입 가드를 통해 타입의 범위를 좁히는 것은 매우 중요하다.

이를 통해 타입스크립트의 타입 시스템을 최대한 활용하고 코드의 안정성을 높일 수 있다.