Union Type (유니온 타입)
자바스크립트의 OR 연산자 (
||) 와 같이 'A이거나 B이다` 라는 의미의 타입입니다
function getText(message: string | number) {
...
}위 함수 getText 의 파라미터 message에는 string이나 number 같은 문자형이나 숫자형의 데이터 타입이 모두 올 수 있습니다.
이처럼 | 연산자를 이용하여 타입을 여러개 연결하는 방식을 유니온 타입 정의 방식 이라고 합니다.
Union Type의 장점
아래 2개의 코드로 Union Type의 장점을 알 수 있습니다.
/* 1번째 코드 예시 */
function getAge(age:any) {
age.toFixed(); // 에러 발생, 타입이 any로 추론되기 때문에 숫자 관련 API를 사용할 수 없음.
}
/* 2번째 코드 예시 */
function getAge(age: string | number) {
age.toFixed(); // 에러 안남, 타입이 string, number가 오기 때문에 숫자 관련 API 사용 가능
}이처럼 any 를 사용하는 경우, 마치 자바스크립트를 작성하는 것처럼 동작을 하고,
Union Type을 사용하는 경우 타입스크립트의 장점을 살리면서 코딩을 할 수 있습니다.
Intersection Type (인터섹션 타입)
Intersection Type (인터섹션 타입) 은 여러개의 타입을 모두 만족하는 하나의 타입
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
type Me = Person & Developer;위 코드는 Person과 Developer 인터페이스를 정의 후, & 연산자를 이용하여, 합친 후, Me 라는 타입에 할당을 한 경우입니다.
결과적으로 Me 타입의 내용은 아래 코드와 같습니다.
{
name: string;
age: number;
skill: string;
}이처럼 & 연산자를 통해 여러개의 타입을 하나로 합친 방식을 인터섹션 타입 방식 이라고 합니다.
Union Type을 사용할 때의 주의점
논리적으로
- Union Type (유니온 타입) 은
OR 연산 - Intersection Type (인터섹션 타입) 은
AND 연산
이라고 생각할 수 있습니다.
그러나, 인터페이스 타입을 다룰 때는 이와 같은 논리적 사고를 주의해야 합니다.
아래 코드를 살펴 보겠습니다.
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
function introduce(someone: Person | Developer) {
someone.name; // O 정상 동작
someone.age; // X 타입 에러 발생
someone.skill; // X 타입 에러 발생
}저 age에 마우스를 올려보면 다음과 같은 에러 문구가 나옵니다.
- 일단
introduce()함수의 파라미터someone의 타입을Person,Developer유니온 타입으로 사용한 것을 알 수 있습니다. - 여기서 우리는
someone의 타입은Person도 될 수 있고,Developer도 될 수 있다고 생각 할 수 있습니다. - 하지만 타입스크립트의 관점에서,
introduce()함수를 호출하는 순간,Person과Developer타입 둘 중 어떤 타입이 오는지에 대해 알 수 없습니다. - 그래서 어떤 타입이 오든 오류가 안나는 방향으로 타입을 추론하게 됩니다.
결과적으로
introduce()함수 안에서는별도의 타입 가드(Type Guard)를 이용하여 타입의 범위를 좁히지 않는 이상 기본적으로는Person과Developer두 타입에 공통적으로 들어있는 속성인name만 접근할 수 있게 됩니다.
function introduce(someone: Person | Developer) {
someone.name; // 편-안
}자료 출처 😶
타입스크립트 핸드북 - 연산자를 이용한 타입 정의
