: 복수의 타입을 쓸 수 있게 한다. JS의 OR 연산자의 역할과 같다. (||)
let address: string | number;
function writeTitle(title : string | number) {
console.log(title);
};
writeTitle('Winney Log');
writeTitle(100);
: 유니온 타입을 사용하면 타입 가드가 되어서 해당 타입을 추론해주고 이해 맞는 API를 자동완성 해주기 때문에 에러발생을 줄일 수 있다!!
function writeTitle(title: string | number) {
// if문을 통해 타입 가드
if(typeof title === 'string') {
title.toUpperCase() // 문자열 API 자동완성
}
if(typeof title === 'number') {
title.toString() // 숫자 API 자동완성
}
throw new TypeError('Title must be string or number');
}
: 여러 타입을 모두 만족하는 하나의 타입. & 사용.
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
function askSomeone(someone: Person & Developer) {
console.log(someone.name);
console.log(someone.age);
console.log(someone.skill);
};
const whoAmI = {
name: 'winney',
age: 10,
skill: 'typescript'
};
askSomeone(whoAmI); // 정상
askSomeone({name:'winney', age:10, skill:'typescript'}); // 정상
: 각각의 타입을 typescript가 어떻게 추론하는지 알아야한다!!
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
function askSomeone1(someone: Person | Developer) {
console.log(someone.name);
console.log(someone.age); // 에러
console.log(someone.skill); // 에러
};
function askSomeone2(someone: Person & Developer) {
console.log(someone.name);
console.log(someone.age);
console.log(someone.skill);
};
❗ 에러가 난다는 것 === typescript가 API 자동완성을 안 해준다는 것
=> typescript가 타입 추론을 못 한다.
askSomeone1
과 askSomeone2
의 차이에서 알 수 있는 것
Person
과 Developer
의 공통 property는 name
이기 때문에 age
과 skill
은 에러: 타입 가드 사용!!
// 타입 가드
function isDeveloper(someone: Person | Developer): someone is Developer{
return (someone as Developer).skill !== undefined;
}
function askSomeone(someone: Person | Developer) {
console.log(someone.name);
if(isDeveloper(someone)) {
console.log(someone.skill); // 타입이 Deeveloper이면 skill 사용가능
} else {
console.log(someone.age) // 타입이 Person이면 age 사용가능
}
};
askSomeone({name:'winney', age: 10});
askSomeone({name:'winney', skill:'typescript'})
타입 가드를 사용해서 askSomeone
실행 시 에러없이 사용가능하다.
askSomeone
실행 시 각 타입에 맞는 값들을 넣으면 알아서 타입에 맞게 실행된다.
더해서
askSomeone({name:'winney', age:10, skill:'typescript'});
당연하지만 의 예시를 실행 할 시 name
과 skill
만 console에 출력된다.