TypeScript - 연산자를 이용한 타입 정의

연산자를 이용한 타입 정의는 크게 두 가지로 분류할 수 있다.

• Union Type(유니온 타입)
• Intersection Type(인터섹션 타입)

Union Type (|)

유니온 타입은 A타입 이거나 B 타입이다라는 의미이다.

만약 유니온 타입을 사용하지 않고 number와 string console을 찍어주는 함수를 생성하고 싶으면 다음과 같이 두 번 작성해야한다. (any는 타입스크립트의 장점 없어짐으로 제외시켰다.)

function logText(text: string): void {
	console.log(text);
}

function logText(text: number): void {
	console.log(text);
}

유니온 타입(|)을 사용하면 두 함수를 하나로 합칠 수 있다. 여러 개 타입을 연결하는 방식이다.

function logText(text: string | number) {
	console.log(text);
}

Intersection Type

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

interface ErrorHandling {
	success: boolean;
	error?: { message: string };
}
interface ArtworksData {
	artworks: { title: string }[];
}
interface ArtistsData {
	artists: { name: string } [];
}

type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;

위 코드는 ErrorHandling 인터페이스의 타입 정의와 ArtworksData 인터페이스와 ArtistData 인터페이스 각각에 타입정의를 & 연산자를 이용해 합치고 할당한 코드이다.

ArtworksResponse 와 ArtistsResponse 를 다음과 같이 인터페이스를 생성했을때와 결과가 같다.

interface ArtworksResponse {
	success: boolean;
	error?: { message: string };
	artworks: { title: string } [];
}
interface ArtistsResponse {
	success: boolean;
	error?: { message: string };
	artworks: { name: string } [];
}

Union Type을 사용할 때 주의할 점

유니온 타입은 OR, 인터섹션은 AND라고 생각할 수 있는데, 인터페이스와 같은 타입을 다룰 때는 이와 같은 논리적 사고를 주의해야 한다.

interface Person {
	name: string;
	age: number;
}
interface Developer {
	name: string;
	skill: string;
}
function introduce(someone: Person | Developer) {
	someone.name; // 정상동작
	someone.age; // X: 타입오류
	someone.skill; // X: 타입오류
}

introduce() 함수의 파라미터 타입을 Person, Developer 인터페이스의 유니온 타입으로 정의하였으므로, OR의 관점으로 생각했을때 age 와 skill 에도 접근할 수 있을 것이라 생각한다.

하지만, 타입스크립트는 Person 타입이 올지 Developer 타입이 올지 알 수 없기때문에 둘 다 포함을 하고 있는 name 만 접근이 가능하도록 한다.

참고자료

타입스크립트 핸드북 - 연산자를 이용한 타입 정의
TypeScript: Handbook - Unions and Intersection Types