[TypeScript] 유니온 타입(Union Type), 인터섹션 타입(Intersection Type)

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다.

1. Union Type

타입은 연산자를 이용해서 정의할 수도 있는데, 이를 통해 한 파라미터에 두 가지 이상의 타입을 정의할 수 있다.이를 union type이라 한다.

function logMessage(value: string | number) {
  if (typeof value == 'number') {
    value.~~~
  }
  if (typeof value == 'string') {
    value.toString();
  }
  throw new TypeError('value must be string or number');
}
logMessage("hello");
logMessage(100);

파라미터를 보면 string과 number 사이에 | 이 들어가있다. 이 |를 통해 string 또는 number 모두를 value라는 파라미터의 타입으로 넣을 수 있게 된다.

이 union type은, 타입을 any로 줬을 때에 비해 이점이 있다. string | number 로 두 가지 타입으로 한정을 한다면, 3번째의 value.~~~ 부분에서 value. 까지만 썼을 때 숫자 타입의 API가 전부 자동완성 형태로 나타나서 바로 사용할 수 있게 된다(이는 typeof.value가 'number'로 되어있기 때문이고, 'string'으로 되어있다면 문자열 API가 자동완성 영역에 나타나게 된다). 반면에 any는 코드를 작성하는 시점에서 타입스크립트가 해당 파라미터의 타입을 정확히 알 수가 없기 때문에 API 사용에 있어서 시간이 더 소모된다는 단점이 있다. 이러한 것을 타입 가드(특정 타입으로 타입의 범위를 좁혀나가는(필터링하는) 과정)라고 한다.

 

이러한 union type은 여러 특징이 있다. 아래 코드를 보자.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}
function askSomeone(someone: Developer | Person) {
  someone.name;
  someone.skill;
}

Developer와 Person 인터페이스를 유니온 타입으로 someone에 타입 지정을 했는데, someone.skill을 쳐보니

위와 같이 현재 Developer는 전혀 인식하지 못하고 있다. 그래서 skill이라는 속성(property)이 없다는 오류를 띄우고 있다.

그 이유는, Developer도 되어야 하고 Person도 되어야 하는 상황인데 타입스크립트의 관점에서는 someone이 어떤 타입으로 들어올 지를 모르기 때문에 에러를 띄우는 것이다.

정리하면 union type은 interface에 대해서는 위에서 설명한 타입 가드 처리가 되어있어야 제대로 타입을 인식할 수 있다고 할 수 있겠다.

 

2. Intersection Type

인터섹션 타입은, 그 이름에서도 유추할 수 있듯이 |가 아닌 &을 사용한다. 파라미터로 들어간 타입들을 전부 만족하는 타입을 인터섹션 타입이라고 한다.

interface Engineer {
  name: string;
  skill: string;
}

interface Villain {
  name: string;
  age: number;
}

function askSomeone2(someone: Engineer & Villain) {
  someone.skill;
  someone.name;
  someone.age;
}

이 경우 사진에서 볼 수 있듯, 두 인터페이스 내부의 속성을 전부 사용할 수 있다.

이 두 가지 타입의 차이점은 무엇일까?

유니온 타입으로 선언한 askSomeone 함수에 대해 askSomeone()을 작성한 후 프리뷰를 보면 사진과 같이 데이터 규격이 나와있다.  이 경우에는 그냥

askSomeone({ name: "Developer", skill: "TypeScript" });
askSomeone({ name: "engineer", age: 26 });

Engineer 인터페이스의 데이터를 주거나 Vallain 인터페이스의 데이터를 주면 된다.

 

그런데, 인터섹션 타입의 경우에는 위 코드를 그대로 써 보면

위와 같은 에러를 띄운다. 즉 Engineer와 Villain의 인터페이스 내의 모든 타입을 다 정의해줘야 되는 것이다. 그러니까..

askSomeone({ name: 'Developer', skill: 'TypeScript', age: 26 });

 

이렇게 세 개를 다 써줘야 된다는 것이다. 이것을 통해 보면, 인터섹션 타입보다 유니온 타입이 훨씬 융통성 있고 사용하기 좋다는 것을 알 수 있다. 그래서 보통은 인터섹션 타입보다는 유니온 타입을 자주 사용한다.