유니온 타입 (Union Type)
- 하나 이상의 타입을 쓸 수 있게 해주는 방법
위의 사진처럼 | 연산자를 이용하면 하나의 값에 2개 이상의 타입을 선언해 줄 수 있다.
우리가 흔히 사용하는 || 연산자와 비슷한 맥락이라고 생각하면 된다.
유니온 타입의 장점
유니온 타입의 장점은 다음과 같다.
코드를 보면 바로 알 수 있듯이 value 매개변수는 "문자열" 또는 "숫자"를 입력으로 받는 코드이다.
위쪽 if 문에서 value 는 number 타입으로 추론되기때문에, toPrecision 라는 숫자 관련 API를 자동완성 할 수 있고, 아래쪽 if 에서도 마찬가지로 문자열 관련 API가 자동완성된다.
이처럼, 유니온 타입을 이용하면 각 타입에 맞는 API를 쉽게 자동완성하여 사용할 수 있다!
💡 위 코드에서 타입스크립트는 value 가 string 또는 number 타입인 것을 알고있다!
if 문 블럭에서 타입을 좁혀주었기때문에 각 타입과 관련된 API가 자동완성 되는것임!
만약 if 문을 없앤다면, 자동완성되는 API는 string 과 number 가 공통으로 가지고 있는 API 일 것이다!
유니온 타입의 특징
다음 코드를 보고 특징을 살펴보자.
Developer 와 Person 인터페이스를 선언하였다.
그리고 아래에 askSomeone 이라는 함수를 만들고, 매개변수은 someone 유니온 타입으로 받게끔 해놓았다.
그리고 함수 내부에서 someone을 타이핑했더니 자동 완성으로 name 밖에 뜨지 않는다.
유니온 타입이라면, name, skill, age 세 가지가 모두 다 뜰 것이라고 예상했는데 말이다..
그리고 추가적으로, 함수 내부에서 skill 과 age 도 허용하지 않는 모습을 보여주고 있다.
그렇다면 타입스크립트 관점에서 name 만 허용하는 이유가 무엇일까?
👉 타입스크립트는 현재 someone 에 현재 어떤 값이 들어올 지 모르기 때문에 보장된 속성에 대해서만 허용을 하는것이다!
정리
- 유니온 타입으로 여러개의 인터페이스를 연결 했을 때, 공통된 속성만 접근할 수 있다.
인터섹션 타입 (Intersection Type)
- 인터섹션 타입(Intersection Type)은 여러 타입을 모두 만족하는 하나의 타입을 의미
위에서 hello변수의 타입은 은 현재 never 타입이다.
never 타입이란? 쉽게 말해서 있을 수 없는 타입이라는 뜻이다.
그야, 위에서 볼 수 있듯 string, number, boolean 세 가지를 만족하는 타입은 존재하지 않으니깐 말이다.
그러면 인터섹션 타입은 언제 사용할 수 있을까?
위에서 한번 나왔던 askSomeone 함수의 매개변수 부분을 유니온 타입대신 인터섹션 타입으로 바꿨다.
유니온 타입으로 했을 땐 떴던 빨간줄이 여기서는 보이지 않는다.
인터섹션 타입을 사용했을 때는 Developer 인터페이스와, Person 인터페이스가 가지고 있는 속성을 모두 만족하는 객체만 매개변수로 들어올 수 있기 때문에, 함수 내부에서 skill과 age를 허용하는 것이다!
호출
유니온 타입
함수의 매개변수를 유니온 타입으로 명시해뒀을때, 함수의 내부에선 보장된 속성에 대해서만 코드를 작성할 수 있었지만, 함수를 호출 할 땐 다음처럼 호출 할 수 있다.
인터섹션 타입
함수의 매개변수가 인터섹션 타입으로 명시되어있는 함수의 경우는 다음과 같이 호출해야한다.
그렇지 않으면, 아래처럼 빨간줄이 뜬다.
참고
- https://joshua1988.github.io/ts/ - 타입스크립트 핸드북
