2020-06-05 TIL
2020-06-05
TypeScript - type guard 관련
함수의 인자가 union type을 받고, 그 타입에 따라 속성이 존재할수도, 없을 수도 있는 경우.. 분기를 만들어 각 블록에서의 타입이 무엇인지 인식시켜줘야 오류대신 올바른 타입 힌트를 볼 수 있다.
interface Fish { // type 도 작동한다
swim: () => void,
bubble: () => void,
};
interface Bird {
fly: () => void,
cry: () => void,
};
// 오류가 난다 - 이정도 해줘서는 알아서 타입추론 하지 못한다
const a = (pet: Fish | Bird) => {
if (!!pet.swim) { // Property 'swim' does not exist on type 'Fish | Bird'.
// Property 'swim' does not exist on type 'Bird'.(2339)
return 'fish';
}
if (!!pet.fly) {
return 'bird';
}
return 'nothing';
}
// 어떤 타입에 해당하는지 여부를 리턴하는 함수
const isFishType = (pet: Fish | Bird): pet is Fish => {
return !!(pet as Fish).swim;
}
const b = (pet: Fish | Bird) => {
if (isFishType(pet)) { // 어떤 타입인지 확실히 알려줬다
pet.bubble();
return pet.swim;
} else {
pet.cry()
return pet.fly
}
}
// 오류가 난다 - 타입 단언
const c = (pet: Fish | Bird) => {
if (!!(pet as Fish).swim) { // 여긴 오류가 안나지만
pet.bubble(); // Property 'bubble' does not exist on type 'Fish | Bird'.
// Property 'bubble' does not exist on type 'Bird'.(2339)
return pet.swim; // 여기도 나고 다 난다
} else {
pet.cry()
return pet.fly
}
}