Typescript - Union Type

Union Type

유니온 타입은 한 가지 이상의 특정 타입을 허용한다.

• 사용법

let seho : string | number | boolean;

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

OR 연산자 |를 이용해서 특정 타입들을 정의해준다.

장점

여러 타입에 접근하기 위해서는 any를 사용하는데,
예를들어 숫자 관련된 타입이 들어온다는 가정하에
타입이 any이기 때문에 api가 자동 완성되지 않는다.

그리고 any를 사용하게 되면 타입스크립트를 사용하는 의미가 없어지게 되는데
유니온 타입을 사용하게 되면 특정 타입만을 허용함과 동시에 api에 접근도 가능하다.

특징

타입 가드

여러 타입을 유니온 타입으로 사용하였을 때,
각각의 타입에 접근하기 위해서는 타입가드를 사용한다.

타입가드는 특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정을 말한다.

if절을 이용해 특정 타입을 가정한다면
그 스코프에서는 특정 타입으로 인식이 된다.

이는 any타입도 마찬가지이긴 하다.

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');
}

인터페이스

유니온타입으로 인터페이스를 적용 했을때는 공통된 속성만이 사용 가능하다. 따로따로 타입가드를 써줘야 에러가 발생하지 않는다.

interface Developer {
    name: string;
}

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

function askSomeone(someone: Developer | Person) {
    someone.name; // <- 접근 가능
  	someone.age; // <- 에러 발생
}