Union Types

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

function logText(text: string | number) {
  // ...
}

 

1) 유니온 타입의 장점

 

함수를 타입으로 나눠서 작성 할 수 있다.

// any를 사용하는 경우
function getAge(age: any) {
  age.toFixe(); // 에러 발생, age의 타입이 any로 추론되기 때문에 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않는다.
  return age;
}

// 유니온 타입을 사용하는 경우
function getAge(age: number | string) {
  if (typeof age === 'number') {
    age.toFixed(); // 정상 동작, age의 타입이 `number`로 추론되기 때문에 숫자 관련된 API를 쉽게 자동완성 할 수 있다.
    return age;
  }
  if (typeof age === 'string') {
    return age;
  }
  return new TypeError('age must be number or string');
}

Intersection Type

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

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;

// 결과 

{
  name: string;
  age: number;
  skill: string;
}

주의사항

일반적인 원시 타입 number, string, 등은 유니온타입으로 or, 인터섹션 and 로 사용할 수 있지만

interface 를 사용 할때에는 주의 해야한다.

 

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 타입 오류
}

인터페이스로 유니온 타입을 적용 할 경우 age, skill 도 유니온 타입을 적용받는게 아니라 공통 속성만 적용 된다. (유니온 적용 x )