[TS-Study] 7. Union type과 Intersection type

1. Union type

1) 개념

Union type은 타입에서 “또는(OR)”의 개념이라고 생각하면 된다. 여러가지 타입 중 한가지만 충족하면 된다고 선언하고 싶을 때 사용할 수 있다. any 타입을 사용해도 유사한 효과를 볼 수 있으나, 타입 범위가 지나치게 광범위해지므로 지양해야한다.

타입스크립트의 OR 연산자인 |를 사용하여 a | b 와 같이 나타낸다.

아래 예시는 unionItem이라는 변수에 string 혹은(OR) number의 2가지 타입중 하나를 할당할 수 있다는 의미이다.

let unionItem: string | number;

2) 장점

⚡️ 타입 추론을 통한 메서드 호출

아래의 코드처럼 any 타입을 사용하게 되면 일반 JS 코드를 작성하는 것과 같이 타입 추론이 전혀 발생하지 않는다. 따라서 string 관련 메소드를 사용하려고 해도 자동완성이 되지 않는다.
하지만 Union type을 사용하면 각 타입에 대해 조건문 처리를 하는 과정에서 타입에 맞는 메소드의 자동완성이 지원된다. 즉, any 대신 Union Type을 사용해야 타입스크립트가 주는 이점을 살릴 수 있다.

타입스크립트는 자바스크립트 구문인 typeof를 이해하고 해당 조건문 스코프 내에서는 타입 범위를 특정 타입으로 좁혀준다. 이렇게 조건문으로 타입 범위를 좁혀 타입 에러를 방지하는 것을 Type Guard라고 부르는데, 이후에 따로 다뤄질 개념이다.

2. Intersection Type

1) 개념

Intersection type은 타입에서 “그리고(AND)”의 개념이라고 생각하면 된다. 여러가지 타입을 모두 만족하게끔 선언하고 싶을 때 사용할 수 있다.

타입스크립트의 AND 연산자인 &를 사용하여 a & b 와 같이 나타낸다.

아래 예시는 intersectionItem이라는 변수에 string 그리고(AND) number의 2가지 타입을 모두 만족하는 타입을 할당할 수 있다는 수 있다는 의미이다. 당연히 이런 타입은 존재할 수 없으므로 intersectionItem의 타입은 결국 never가 될 것이다.

let intersectionItem: string & number;

보다시피 기본 타입 여러개를 동시에 만족하는 것은 불가능하므로, intersection type은 주로 객체 형태의 타입인 interface나 type alias와 함께 쓰인다. 바로 아래 챕터의 예시로 확인할 수 있다.

3. Union과 Intersection의 함정

앞서 살펴본 내용만으로 보면, Union type은 합집합의 개념, Intersection type은 교집합의 개념으로 생각할 수 있으나, 실상은 그렇지 않다.

 
다음 예시를 통해 살펴보자.

파라미터 subject는 Union type이다. 만약 Union type이 합집합의 개념이었다면 subject의 프로퍼티로 name과 age, skill이 모두 표시되었어야한다. 그러나 타입스크립트의 입장에서는 subject가 Person일지 Developer일지 모르기 때문에 참조 에러를 방지하기 위해 두 타입의 공통 프로퍼티인 name만 제공한다.

이번에는 반대로 subject가 Intersection type이 되었다. 앞의 예시를 통해 이미 눈치챘겠지만, subject는 Person이면서 동시에 Developer인 타입, 즉 두 interface의 모든 프로퍼티를 지닌 타입이 된다. 따라서 타입스크립트는 두 종류의 interface를 동시에 만족시키기 위해 name, age, skill 프로퍼티를 모두 제공한다.

👨‍💻 공부하면서 작성하는 글이다보니 오류가 있을 수 있습니다. 다방면의 피드백 환영합니다!