Union Type

여러 타입들을 조합하여 사용

Union Type 타입은 Javascript의 OR 연산자(||)와 같이 'A이거나 B이다' 라는 의미의 타입이다.

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

위 함수의 파라미터 text에는 문자열, 숫자 타입이 모두 올 수 있으며, 이처럼 '|' 연산자를 이용하여 타입을 연결하는 방식을 유니온 타입 정의 방식이라고 한다.

장점

아래 예제는 sayHello 함수 text인자에 각각 any, Union Type을 사용한 결과이다.

// any 사용
function sayHello(text: any) {
  // 타입이 any로 추론되어 관련된 API 작성 시 자동 완성되지 않는다.
  text.toString(); 
  return text;
}

// 유니온 타입 사용
function sayHello(text: number | string) {
  if (typeof text === 'number') {
    text.toFixed(); // 타입이 `number`로 추론되어 관련 API를 자동완성
    return text;
  }
  if (typeof text === 'string') {
    return text;
  }
  return new TypeError('text는 number, string 타입이 아닙니다.');
}

이처럼 any를 사용하는 경우에는 Javascript를 사용하는 것처럼 동작한다.

반면 유니온 타입을 사용한 경우에는 Typescript의 이점을 살려 코딩할 수 있다.

Intersection Type

여러 가지 타입을 결합해서 사용

Intersection Type은 여러 타입을 모두 만족하는 하나의 타입을 의미한다.

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

type Me = Person & Mirrer;

위 코드를 실행한 결과 타입은 다음과 같이 정의된다.

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

이처럼 '&' 연산자를 이용해 여러 타입 정의를 하나로 합친 방식을 인터섹션 타입 정의 방식이라고 한다.

Interface Union Type

Interface Union Type의 논리적 사고 방식

논리적으로 유니온 타입은 OR, 인터섹션은 AND라고 생각할 수 있다.

하지만 Interface와 같은 타입을 다룰 때는 이와 같은 논리적 사고를 주의해야 한다.

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

function introduce(someone: Person | Mirrer) {
  someone.name;
  someone.age; // Type Error
  someone.gender; // Type Error
}

위 코드는 파라미터 타입이 유니온으로 정의되어 있어 두 interface 속성들을 모두 사용할 수 있을 것 같다.

하지만, Typescript 관점에서는 함수를 호출하는 시점에 Person, Mirrer 두 타입 중 어떤 타입이 올지 모르기 때문에 최대한 오류가 발생하지 않는 방향으로 타입을 추론한다.

const me: Person = { name: 'mirrer', age: 20 };

introduce(me); // `someone.gender` 속성에 접근하면 Error 발생

결과적으로 함수는 타입 가드(Type Guard)를 이용하여 타입 범위를 좁히지 않는 한 기본적으로 두 타입의 공통 속성인 name만 접근할 수 있다.

function introduce(someone: Person | Mirrer) {
  console.log(someone.name); // O 정상 동작
}

참고 자료

TypeScript: JavaScript With Syntax For Types.
React TypeScript Tutorial for Beginners - Codevolution
타입스크립트 입문 - 기초부터 실전까지 - 장기효