8월 4일 TIL - 타입스크립트 유니온 타입과 인터섹션 타입의 차이점

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

 

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

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

위와 같이 두 개의 인터페이스로 타입을 정의했을 때

 

const askSomeone1 = (someone: Developer | Person) => {
  someone.name;
  someone.skill; //에러
  someone.age; //에러
};

 

에러 나는 이유 : Developer와 Person의 속성 모두를 제공해 주지 않고, 두 타입의 보장된 공통 속성인 name만 제공해 줌.
만약 skill과 age를 사용하고 싶다면 타입 가드를 이용해서 특정 타입으로 제한을 해야 한다

 

askSomeone1({ name: "김", skill: "스킬1" }); 
askSomeone1({ name: "강", age: 30 });

함수 호출 시에도 파라미터로 Developer나 Person 타입 중 하나로 정해 넘겨주면 된다

 

 

2. 인터섹션 타입(Intersection Type)은 여러 타입을 모두 만족하는 하나의 타입을 의미

 

const askSomeone2 = (someone: Developer & Person) => {
  someone.name;
  someone.skill;
  someone.age;
};

유니온 타입과 다르게 에러가 나지 않는다.

유니온 타입은 교집합, 인터섹션 타입은 합집합 같은 느낌

 

askSomeone2({ name: "강", skill: "스킬1" }); //에러

에러 나는 이유: askSomeone2 메서드는 Developer 타입과 Person 타입을 인터섹션으로 받기 때문에 아래와 같이 두 타입의 모든 속성이 파라미터로 넘어와야 함

askSomeone1({ name: "약", skill: "스킬1", age: 30 });