Union Type, Intersection Type

Union Type 정의 방식

- || 연산자랑 같은 의미.

- function example(text: string | number) { ... } 처럼 | 연산자를 이용해서 타입을 여러 개 연결하는 방식

 

장점

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

위와 같이

1. any 를 써야하는 경우는 타입 안전성을 해치므로, 기존 JS와 다를 바 없음.

2. 따라서 유니온 타입을 통해 "코드 자동완성" 그리고 "타입 체크" 가 가능하므로 타입 스크립트 이점을 살릴 수 있음.

 

Intersection Type 정의 방식

- 여러 타입을 모두 만족하는 하나의 타입.

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

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

이렇게 합쳐진 Capt 타입은 name, age, skill 속성을 가지게 된다.

이처럼 & 연산자를 이용해 여러 개의 타입 정의를 하나로 합치는 것이다.

 

유니온 타입 주의사항

- 유니온은 or, 인터섹션은 and 로 단순히 생각해서 논리적 오류를 일으킬 수 있다.

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: string;
}
function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}

introduce 를 호출하는 시점에 Person이 올지, Developer 가 올지 모르기 때문에, 어느 타입이 들어오든 오류가 나지 않게 타입을 추론하게 된다.

const capt: Person = { name: 'capt', age: 100 };
introduce(capt); // 만약 `introduce` 함수 안에서 `someone.skill` 속성을 접근하고 있으면 함수에서 오류 발생

const tony: Developer = { name: 'tony', skill: 'iron making' };
introduce(tony); // 만약 `introduce` 함수 안에서 `someone.age` 속성을 접근하고 있으면 함수에서 오류 발생

즉, introduce 함수 내에서 별도로 타입 가드를 이용해서 타입 범위를 좁히지 않으면, 기본적으로는 공통 속성에만 접근할 수 있게 된다는 뜻이다.