[TS] 타입가드

다음과 같이 두 개의 타입이 있을 때,

class Bird {fly() {console.log(`I'm flying.`)}}
class Fish {swim() {console.log(`I'm swimming.`)}}

만약 다음과 같은 flyOrSwim과 같은 함수를 구현할 때, 매개변수 o는 Bird이거나 Fish이므로 코드 작성이 모호해집니다.

const flyOrSwim = (o: Bird | Fish): void => {
    //o.fly() ???
}

instanceof 연산자

instanceof 연산자는 객체 instanceof 타입 // boolean형태의 타입의 값 반환처럼 사용할 수 있습니다. 위의 함수를 고치면 다음과 같습니다.

const flyOrSwim = (o: Bird | Fish): void => {
    if(o instanceof Bird){
        (o as Bird).fly()
    }else if(o instanceof Fish){
        (o as Fish).swim()
    }
}

타입스크립트에서의 instanceof 연산자

TS에서는 JS와 다르게 instanceof 연산자에 타입 가드 기능이 있다.

const flyOrSwim = (o: Bird | Fish): void => {
    if(o instanceof Bird){
        o.fly()
    }else if(o instanceof Fish){
        o.swim()
    }
}

첫 번째 조건문에서 Bird가 true라면 변수 o를 자동으로 Bird 타입의 객체로 전환한다.

is 연산자

변수 is 타입으로 사용한다.

const isFlyable = (o: Bird | Fish): o is Bird => {
    return o instanceof Bird
}
const flyOrSwim = (o: Bird | Fish): void => {
    if(isFlyable(o)){
        o.fly()
    }else if(...){
        o.swim()
    }
}