Union Type과 Intersection Type

유니온 타입이란?

어떤 변수 값이 무엇이 올지는 모르지만 어떤 타입들이 올지는 알고 있을 경우 해당 변수에 올 수 있는 타입을 복수로 허용하는 타입이다.

let variable : string|number|boolean;

유니온 타입 장점

유니온 타입으로 설정된 변수에 대해서 타입의 종류마다 다른 api 속성이나 명령어를 사용할 수 있다.(타입 가드)

function logMessage(value: string | number) {
  if (typeof value === 'string') {
    value.toLocaleUpperCase(); //string관련 api
  }
  if (typeof value === 'number') {
    value.toLocaleString(); // number관련 api
  }
  throw new TypeError('value must be string or number')
}

유니온 타입의 특징

유니온 타입으로 인터페이스 형식의 구조체로 타입이 지정될 경우 그 여러가지 인터페이스의 속성중에서 모두 가진 속성만을 접근할 수 있다. 왜냐하면 지정된 타입에 대해서 모두 사용할 수 있어야 하기 때문이다.

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

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

function askSomeone(someone: Developer | Person) {
  someone.name; // 접근할 수 있다.
  someone.age; // 접근할 수 없다.
  someone.skill; // 접근할 수 없다.
}

만약 age나 skill에 접근하고 싶다면 타입가드를 사용하여 type에 따라 구분한 뒤에 접근할 수 있다.

인터섹션 타입이란?

어떤 변수 값이 여러가지의 타입을 동시에 만족해야할 경우에 사용하는 타입이다.

let variable: string&number&boolean; //이런 타입을 만족하는 타입은 없다.

인터섹션 타입의 특징

인터섹션 타입으로 인터페이스 형식의 구조체로 타입이 지정될 경우 인터섹션 타입으로 연결된 모든 구조체의 속성값을 사용할 수 있다.

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

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

유니온 타입과 인터섹션 타입의 차이점

함수를 호출하면서 차이점을 볼 수 있다.

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

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

function askSomeone1(someone: Developer | Person) {
  ...
}
  
function askSomeone2(someone: Developer & Person) {
  ...
}
  
askSomeone1({ name : '아무개', age: 27}) // 함수호출 성공
askSomeone1({ name : '아무개', skill: "typescript"}) // 함수호출 성공

askSomeone2({ name : '아무개', age: 27}) // 함수호출 실패
askSomeone2({ name : '아무개', skill: "typescript"}) // 함수호출 실패
askSomeone2({ name : '아무개', skill: "typescript", age: 27})//함수호출 성공  

즉, 함수호출 시 인터섹션 타입은 매개변수로 선언된 인터섹션 타입에 맞는 새로운 타입의 변수를 만들어주어야 하지만 유니온 타입은 인터페이스로 선언된 타입에 맞는 변수를 넣어주면 된다.