타입스크립트 연산자를 이용한 타입 정의

Union Type

Union Type은 TypeScript의 기능 중 하나이며 변수의 값이 여러 타입을 가지는 경우 주로 사용됩니다 (OR 연산자)

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

위처럼 사용하면 text에는 문자열 타입이나 넘버 타입이 들어올 수 있다.

Union Type의 장점

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

any 타입은 장점보다 단점이 많으며 타입을 추론할 수 없는 경우 사용되므로 상황에 맞게 사용하는 것을 권장합니다.

Intersection Type

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

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

위 코드는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 이라는 타입에 할당한 코드입니다. 결과적으로 Capt의 타입은 아래와 같이 정의됩니다.

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

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

Intersection Type은 Union Type의 차이

Intersection Type은 Union Type은 비슷하지만 다른 방식으로 동작합니다.
먼저 Union Type에 대해 보자

type A = {
  A: number;
  B: string;
}

type B = {
  B: number;
  C: string;
}

위 코드를 그림으로 나타내면 다음과 같다

type A와 type B는 동일한 속성 B를 가집니다. type A는 속성 B를 string 타입으로 정의하였고 type B는 속성 B를 number 타입으로 정의했습니다.

이제, type A와 type B를 Union Type으로 만들어보자

type A = {
  A: number;
  B: string;
}

type B = {
  B: number;
  C: string;
}

type C = A | B;

let obj1: C = {
  A: 10,
  B: 'HI',
  C: 'string'
}

let obj2: C = {
  A: 10,
  B: 20,
  C: 'string'
}

| 연산자를 사용하여 Union Type인 type C를 정의하였습니다. 타입이 C로 정의된 객체의 B 속성은 string 또는 number 타입으로 값을 선언할 수 있습니다.

다음은 & 연산자를 사용하여 Intersection Type인 type C로 정의하였습니다.

type A = {
  A: number;
  B: string;
}

type B = {
  B: number;
  C: string;
}

type C = A & B;

let obj1: C = {
  A: 10,
  B: 'HI',
  C: 'string'
}

let obj2: C = {
  A: 10,
  B: 20,
  C: 'string'
}

객체의 B속성에서 다음과 같은 문제가 발생한다

문제의 원인은 type A와 type B의 B 속성은 교차되는 속성이지만, 타입이 다르기 때문입니다.

정리하자면 Intersection Type은 Union Type과 비슷하지만, 교차되는 타입이 동일한 경우 사용됩니다.👌

출처
https://joshua1988.github.io/ts/guide/operator.html#union-type%EC%9D%98-%EC%9E%A5%EC%A0%90
https://developer-talk.tistory.com/357