[TypeScript] 연산자를 이용한 타입 정의 (Union Type)

유니온 타입(Union Type)

자바스크립트의 OR 연산자(||)와 같이 'A이거나 B이다'라는 의미의 타입이다.
즉, | 연산자를 이용해 여러 개의 타입을 연결하는 방식을 말한다.
아래 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있다.

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

Union Type의 장점

// any를 사용하는 경우
function getAge(age: any) {
	age.toFix();  // 에러 발생, 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');
}

인터섹션 타입(Intersection Type)

여러 타입을 모두 만족하는 하나의 타입을 의미한다.
즉, & 연산자를 이용해 여러 개의 타입 정의를 하나로 합치는 방식을 말한다.

아래 코드는 Person 인터페이스와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후,
Capt 이라는 타입에 할당한 코드이며, 결과적으로 Capt의 타입은 다음과 같이 정의된다.

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을 사용할 때 주의할 점

아래 코드는 introduce() 함수의 파라미터 타입을 Person, Developer 인터페이스의 유니온 타입으로 정의한 경우이다.

여기서 주의할 점은 introduce() 함수를 호출하는 시점에서 어느 타입이 올 지 알 수 없기 때문에
별도의 타입 가드(Type Guard)를 이용하여 타입의 범위를 좁히지 않는 이상, 기본적으로는 두 가지 타입에 공통적으로 들어있는 속성인 name에만 접근할 수 있다.

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

// introduce()의 파라미터 타입을 유니온 타입으로 정의
function introduce(someone: Person | Developer) {
	someone.name;  // O 정상 동작
	someone.age;  // X 타입 오류
	someone.skill;  // X 타입 오류
}