안녕하세요! 이번 시간에는 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인 함수를 만들어봤습니다.

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

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

감사합니다.