본문 바로가기
공부/TypeScript

Union / Intersection Type

by svcbn 2025. 1. 8.

09/24

 

 

유니온 타입(Union Type)이란?

유니온 타입이란 Javascript의 OR연산자( || ) 처럼 'A거나 B다' 라는 의미의 타입이다.

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

이런 식으로 사용하면 위 함수의 파라미터 에서 string과 number 타입을 모두 사용할 수 있다.

 

 

Union Type 의 장점

// any를 사용하는 경우
function getAge(age: any) {
  age.toFixe(); // 에러 발생
  return age;
}

// 유니온 타입을 사용하는 경우
function getAge(age: number | string) {
  if (typeof age === 'number') {
    age.toFixed(); // 정상 동작,
    return age;
  }
  if (typeof age === 'string') {
    return age;
  }
  return new TypeError('age must be number or string');
}

Javascript 를 사용하는 것 처럼 any를 사용하면 타입이 any 로 추론되기 때문에,
number 관련 코드가 자동 완성되지 않는다.

union type을 사용하면 타입이 number로 추론되기 때문에 쉽게 자동완성 할 수 있다.

 

 

인터섹션 타입(Intersection Type)

인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입이다.

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

type Capt = Person & Developer;


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

이와 같이 서로 다른 타입 정의를 & 연산자를 이용해 하나로 합치는 방식을 인터섹션 타입 정의 방식이라고 한다.

 

 

Union Type을 쓸 때 주의할 점

논리적으로 유니온 타입은 OR, 인터섹션 타입은 AND 라고 생각 될 수 있지만,
논리적 사고와 일치하지는 않는다.

컴파일러는 호출 시점에 어떤 타입이 올지 알 수 없기 때문에,
오류가 안 나는 방향으로 타입을 추론하게 된다.

A 타입도 될 수 있고, B 타입도 될 수 있지 라고 생각하고 사용하게 되면, 어느 쪽이든 오류가 안 나는 방향으로
추론하게 되고, 타입 가드를 하지 않는 이상 공통적으로 들어있는 속성에만 접근할 수 있게 된다.

'공부 > TypeScript' 카테고리의 다른 글

extends / implements  (0) 2024.09.23
TypeScript 의 유용한 연산자  (0) 2024.09.17
배열 활용 method  (0) 2024.08.27