Interface type guard 하는 방법

안녕하세요! 이번 시간에는 typescript에서 interface를 사용할때 type guard를 하는 방법에 대해서 간단하게 2가지 예시를 통해서 알아보도록 하겠습니다!

첫번째로 예시코드에서는 Video와 Book 인터페이스가 있습니다.

그리고 study라는 함수를 만들어서 그 함수의 매개변수는 Video 와 Book 타입만 들어오도록 만들고

그 타입이 Video 타입이면 “인강 듣는중”이라고 나오고 Book 타입이면 책으로 공부중이라는 리턴값을 내보내고 싶습니다.

그러면 어떤식으로 코드를 짜야할까요?

바로 아래 코드를 살펴봅시다!

interface Video {
    watching:boolean;
}

interface Book {
    reading:boolean;
}

const study = (type:Video | Book):string => {
    if('watching' in type) {
        return "인강 듣는중"
    }
    else {
        return "책 으로 공부중"
    }
}

const type:Video = {
    watching:true
}

console.log(study(type))

생각보다 엄청 간단하죠? 그냥 그 타입안에 watching이라는 프로퍼티가 있으면 video타입이고 아니면 book 타입이기때문에 프로퍼티로 분기처리를 하면 됩니다!

만약 인터페이스에 같은 네임의 프로퍼티가 있으면 어떻게 해야할까요??

그러면 바로 아래와 같이 코드를 만들어주면 됩니다.

interface Apple {
    color:"red"
}

interface Melon {
    color:"green"
}

const isApple = (fruit:Apple | Melon):fruit is Apple => {
    return fruit.color === "red"
}

console.log(isApple({color:"red"}))

사과와 멜론의 인터페이스가 있는데 color라는 같은 프로퍼티 이름으로 value값이 다릅니다.

그러면 fruit is Apple 과 같이 리턴 타입으로 인터페이스 비교라는 것을 명시해주고 상황에 맞게

리턴값을 만들어주어 코드를 만들어주면 됩니다.

저는 해당 과일이 사과인지 아닌지를 판별해주는 함수를 만들어 {color:”red”}를 넣어주면 true이고 green을 넣어주면 false인 함수를 만들어봤습니다.

위의 코드 처럼 매우 간단하게 타입을 지키는 방법에 대해 알아보았습니다.

실무에서는 여기서 추가적으로 응용이 들어가 사용되면 유용하게 타입을 지키면서 개발이 가능할 것 같습니다

감사합니다.