유니온 타입(Union Type)
•
| 연산자를 이용해 타입을 여러 개 이용하는 방식을 유니온 타입 정의 방식이라고 부른다.
// text에는 문자열타입, 숫자타입 모두 올 수 있다.
function logMessage(text: string | number) {
console.log(text);
}
TypeScript
복사
유니온 타입의 장점
•
any를 사용하는 경우
◦
해당 타입이 명확하지 않아서 필요한 타입의 API를 작성할 때 코드가 자동완성 되지 않는다.
function getAge(age: any) {
// 에러 발생
// age의 타입이 any로 추론되기 때문에
// 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않는다.
age.toFixe();
return age;
}
TypeScript
복사
•
유니온 타입을 사용하는 경우
function getAge(age: number | string) {
if (typeof age === 'number') {
// 정상 동작
// age의 타입이 `number`로 추론되기 때문에 숫자 관련된 API를 쉽게 자동완성 할 수 있다.
age.toFixed();
return age;
}
if (typeof age === 'string') {
return age;
}
return new TypeError('age must be number or string');
}
TypeScript
복사
유니온 타입의 특징
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer | Person) {
//타입검증없이 쓸 경우 공통된 속성(보장된 속성)만 접근가능하다.
someone.name
someone.skill // error
someone.age // error
}
TypeScript
복사
인터섹션 타입 소개
인터섹션(&)으로 타입을 정의하면 두 개(또는 여러 개)의 모든 속성에 접근할 수 있다.
//공통된 속성이 아니어도 접근 가능하다. (유니온 타입과의 차이)
function askSomeone(someone: Developer & Person) {
someone.name
someone.skill // not error
someone.age // not error
}
TypeScript
복사
유니온 타입과 인터섹션 타입의 차이점
function askSomeone(someone: Developer & Person) {
someone.name
someone.skill
someone.age
}
//인터섹션으로 타입정의가 되어 있어서 Developer와 Person의 속성을 모두 인자로 넘겨주어야 한다.
askSomeone({ anme: '디벨로퍼', skill: '웹 개발' }); // error
TypeScript
복사
