유니온과 인터섹션 타입

유니온과 인터섹션 타입

A, B라는 두 사물이 있을 때 이를 유니온(union; 합집합)하면 둘을 합친 (A나 B에 해당하는 것 전부) 결과가 나오며 인터섹션(intersection; 교집합)하면 둘의 공통부분(A, B 모두에 속하는 것)이 결과로 나옵니다.

 

TypeScript는 타입에 적용할 수 있는 특별한 연산자인 유니온(|)과 인터섹션(&)을 제공합니다. 타입은 집합과 비슷하므로 집합처럼 연산을 수행할 수 있습니다.

type Cat = {name: string, purrs: boolean}
type Dog = {name: string, barks: boolean, wags: boolean}
type CatOrDogOrBoth = Cat | Dog
type CatAndDog = Cat & Dog

CatOrDogOrBoth는 문자열 타입의 name 프로퍼티가 있다는 사실을 알 수 있으며, Cat 또는 Dog 둘 다 할당할 수 있습니다.

// Cat
let a: CatOrDogOrBoth = {
    name: 'ChunSik',
    purrs: true
}

// Dog
a = {
    name: 'MungZa',
    barks: true,
    wags: true
}

// 둘 다
a = {
    name: 'Linda',
    barks: true,
    purrs: true,
    wags: true
}

유니온 타입(|)에 사용된 값이 꼭 유니온을 구성하는 타입 중 하나일 필요는 없으며, 양쪽 모두에 속할 수 있습니다.

 

엄청난 애완견묘는 name을 가졌을 뿐만 아니라 purr(냥이가 가르랑 거림), bark(멍멍이가 짖음), wags(꼬리 흔듦)를 할 수 있습니다.

let b: CatAndDog = {
    name: 'Linda',
    barks: true,
    purrs: true,
    wags: true
}

실전에선 인터섹션보단 유니온을 자주 사용한다고 합니다.

function trueOrNull(isTrue: boolean){
    if(isTrue) {
        return 'true'
    }
    return null
}

위의 함수는 string 또는 null을 반환할 수 있으며 아래처럼 표현할 수 있습니다.

type Returns = string | null

아래 함수는 조건이 참이면 반환 타입이 string이고, 그렇지 않으면 number입니다. 즉, string | number를 반환합니다.

function(a: string, b: number) {
    return a || b
}

참고로 배열에도 자연스럽게, 특히 이형(heterogeneous) 배열일 때 유니온이 종종 등장합니다.