[TypeScript] 연산자를 사용한 타입 정의 (유니언 타입)

유니언 타입

• 여러 개의 타입 중 한 개만 쓰고 싶을때 사용하는 문법

• | 를 사용하여 사용한다.

function logText(text: string | number) {
  console.log(text);
}

logText('hi'); // hi
logText(99); // 99

유니언 타입의 장점

• 동일한 동작을하는 함수의 타입이 다르다는 이유로 함수를 하나 더 작성해서 관리해야 하는 불편함을 없애고 코드 중복을 줄일 수 있다.

• any를 사용하는 방법과 비슷하지만 코드의 자동완성 기능을 사용할 수 있는 타입스크립트의 장점을 취할 수 있따. 반면 any를 사용했을때는 자동완성 기능을 사용할 수 없다.

유니언 타입을 사용할 때 주의할 점

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

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

function introduce(someone: Person | Developer) {
  console.log(someone.age) // age속성은 Person에만 존재하기 때문에 타입에러가 발생한다.
  console.log(someone.skill) // skill속성은 Developer에만 존재하기 때문에 타입에러가 발생한다.
}

function introduce(someone: Person | Developer) {
  // in 연산자를 사용하여 해당 속성이 존재할때만 실행되도록 조건을 걸어주면 된다.
  // 이러한 방법을 타입가드라고 하는데, 조건문 + in이나 typeof를 사용하여 타입을 구분한 후 코드를 작성해야 한다.
  if ('age' in someone) {
    console.log(someone.age);
    return 
  }
  
  if ('skill' in someone) {
    console.log(someone.skill);
    return
  }
}

출처: 쉽게 시작하는 타입스크립트