타입스크립트의 union타입과 Intersection Type

타입스크립트의 union타입과 Intersection Type이란

1. 유니온타입이란?

가장먼저 union타입이란 무엇인지보면

function list(item: number|string){
...
}

(item: number|string)처럼 item의 타입을 number와 string 두가지 타입 중 하나로 쓸 수 있게 해줍니다.

즉 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다 라는 의미의 타입이다.

주로 유니온 타입을 쓸 때

function list(item: number|string){
if(typeof item === 'number){
...
}
if(typeof item === 'string){
...
}
}

위의 예시처럼 유니온타입을 쓸 때 주로 타입가드를 써주며 타입을 지정해줍니다

2. 유니온타입과 인터렉션 타입

2-1 유니온타입

유니온타입에는 주의할 점이 있습니다.
그것은 유니온타입을 쓸 때 주로 "A|B"처럼 유니온타입을 쓰면 둘 중 하나라는 뜻 때문에 타입이 둘다 포함된다고 오해합니다
하지만 실제로 보면 유니온타입은 그렇지 않습니다.

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

위의 예시를 보면
타입스크립트 관점에서는 introduce() 함수를 호출하는 시점에 Person 타입이 올지 Developer 타입이 올지 알 수가 없기 때문에 어느 타입이 들어오든 간에 오류가 안 나는 방향으로 타입을 추론하게 된다. 즉 두 타입의 공통적으로 들어있는 타입만 접근이 가능하게 됩니다

즉 합집합이라 생각하면 편합니다.

2-2인터렉션타입

반대로 인터렉션타입은 위의 예시에서

function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // O 정상 동작
  someone.skill; // O 정상 동작
}

즉 타입이 type introduce = Person & Developer;

을 하게 되는 것입니다.

유니온타입과 달리 교집합을 하는 것이 인터렉션 타입입니다.

이것을 요약하자면

keyof (A&B) = (keyof A) | (keyof B) //구조적 타입
keyof (A|B) = (keyof A) & (keyof B) //유니온타입

참고자료
(https://velog.io/@ckstn0777/TypeScript-Union-Type%EA%B3%BCIntersection-Type)
(https://velog.io/@soulee__/TypeScript-Union-Type)