유니언 타입?

• 기존의 타입을 기반으로 다양한 연산자를 사용하여 새로운 타입을 만들 수 있다.
• 쉽게 말하면 타입들을 조합한다는 의미

1. 유니언 타입

• 서로 다른 두 개 이상의 타입들을 조합하여 만드는 것.
• 타입 조합에 사용된 타입 중 무엇이든 하나의 타입으로 가질 수 있다.
• 조합에 사용된 각 타입을 유니언 타입의 member라고 부른다.

function printId(id: number | string) {
  console.log("your id is: " + id);
}

printId(100);
printId("100");
printId({ myID: 202020 }); // error.

2. 유니언 타입 사용하기

• 타입스크립트에서 유니언을 다룰 때에는 해당 유니언 타입의 모든 멤버에 대하여 유효한 작업일 때에만 허용된다.
• 다시 말하면 string | number 라는 유니언 타입의 경우, string 타입에만 유효한 메서드를 사용할 수 없다.

function printId(id: number | string) {
  console.log(id.toUpperCase());
}
// Property 'toUpperCase' does not exist on type 'string | number'.
// Property 'toUpperCase' does not exist on type 'number'.

• 이를 해결하기 위해서는 코드상에서 유니언을 좁혀야 한다.
• 좁힌다 라는 의미는 타입스크립트가 코드 구조를 바탕으로 어떤 값을 보다 구체적인 타입으로 추촌할 수 있을 때 발생한다.
• 예를 들면 타입스크립트는 오직 string 값만이 typeof 연산의 결과값으로 string을 가진다는 것을 알고 있다.

Ex-1

function printId(id: number | string) {
  if (typeof id === 'string) {
      // 해당 분기에서 id는 string 타입을 가진다.
  } else {
    console.log(id)
    // 해당 분기에서는 number 타입을 가진다.

Ex-2

// isArray와 같은 함수를 사용하는 방법.
function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    // 여기에서 'x'는 'string[]' 타입입니다
    console.log("Hello, " + x.join(" and "));
  } else {
    // 여기에서 'x'는 'string' 타입입니다
    console.log("Welcome lone traveler " + x);
  }
}

Ex-3

• 유니언의 모든 멤버가 공통점을 가지고 있을 때.
• 예를 들어, 배열과 문자열은 slice 메서드를 공통적으로 내장한다.
• 좁히기가 없어도 해당 프로퍼티를 사용할 수 있다.

function getFirstThree(x: number[] | string) {
  return x.slice(0, 3)
}