반응형
유니온과 인터섹션 타입
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) 배열일 때 유니온이 종종 등장합니다.
반응형