Union type과 Intersection type

2024년 12월 23일

Union type

| 기호로 구분하며, 모든 요소를 포함할 수 있다.

type Foo = string | number; 일때

const var1: Foo = '123';
const var2: Foo = 123;

var1과 var2 모두 가능하다.

Intersection type

& 기호를 사용하며, 모든 타입을 동시에 만족하는 값만 허용한다.

type Foo = string | number;
type Bar = number | boolean;
 
type result = Foo & Bar; // 'number'

만약 Foo와 Bar에 공통인 타입이 없다면 ? → never가 된다.

Intersection type 더 알아보기

1️⃣ 더 좁은 타입(리터럴 타입)으로 평가된다.

type T1 = 1 & number; // 1
type T2 = 'xxx' & string; // "xxx"
type T3 = true & boolean; // true

2️⃣ never 타입을 제외한 나머지는 any 와 만나면 모두 any 로 바뀐다.

type T4 = any & 1; // any
type T5 = any & boolean; // any
type T6 = any & never; // never

3️⃣-1

interface Paid {
  type: string;
}
 
interface Webtoon {
  title: string;
  episode: number;
}
 
type PaidWebtoon = Paid & Webtoon;
 
const Trace: PaidWebtoon = {
  title: 'trace',
  episode: 1,
  type: 'rent',
};

-> PaidWebtoon이 Paid와 Webtoon의 속성을 모두 포함한다.

3️⃣-2

interface Paid {
  type: string;
}
 
interface Webtoon {
  title: string;
  episode: number;
  type: number;
}
 
type PaidWebtoon = Paid & Webtoon;
 
const Trace: PaidWebtoon = {
  title: 'trace',
  episode: 1,
  type: 'rent', // ❌
};

-> Paid와 Webtoon의 type이 다르므로(string & number) never로 평가된다.

참고자료

https://fe-developers.kakaoent.com/2022/221124-typescript-tip/