[TypeScript] 사용자 정의 타입가드

🐳 사용자 정의 타입가드

참 또는 거짓을 반환하는 함수를 이용해 개발자의 입맛대로 타입 가드를 만들 수 있도록 도와주는 문법이다.

type Dog = {
    name: string;
    isBark: boolean;
};

type Cat = {
    name: string;
    isScratch: boolean;
};

type Animal = Dog | Cat;

function warning(animal: Animal){
    // 타입 좁히기
    if("isBark" in animal){
        // 강아지의 경우
        animal
    } else if("isScratch" in animal){
        // 고양이의 경우
    }
}

(타입을 수정할 수 없다고 가정할 때)in 연산자를 이용해 타입을 좁히는 방식을 사용한다. 조건문을 통해 타입이 좁혀지면 내부의 animal은 각각 Dog 타입과 Cat 타입으로 나눠진다. 하지만 타입이 수정되는 경우가 발생하게 된다면 animal의 타입은 다음처럼 변하게 된다.

type Dog = {
    name: string;
    isBarked: boolean; // isBark -> isBarked로 변경
};

이러한 경우 사용자 정의 타입가드를 사용한다.

 

animal이 Dog 타입인지 확인하는 함수를 만들어보자.

// 객체가 Dog 타입인지 확인하는 함수
function isDog(animal: Animal){
    // animal을 Dog로 단언한 후 검사
    return (animal as Dog).isBark !== undefined;
}

function warning(animal: Animal){
    // 타입 좁히기 (타입을 손댈 수 없다고 가정)
    if(isDog(animal)){
        // 강아지의 경우
        animal
    } else if("isScratch" in animal){
        // 고양이의 경우
    }
}

animal이 현재는 타입이 좁혀지지 않았으므로 isBark 속성을 찾을 수 없다. 따라서 animal을 Dog 타입으로 단언한 후 검사를 한다.

하지만 animal에 커서를 대면 타입이 좁혀지지 않았음을 확인할 수 있다. 이는 타입스크립트가 우리가 만든 함수의 반환값으로는 타입을 좁혀주지 않기 때문이다. 따라서 함수 자체를 타입가드의 역할로 만들어준다.

function isDog(animal: Animal): animal is Dog{ // 직접 만든 함수의 반환값을 가지고는 타입을 좁혀주지 않음 -> 함수 자체를 타입가드로 만듬
    // animal을 Dog로 단언한 후 검사
    return (animal as Dog).isBark !== undefined;
};

타입가드로 만들어준 후 animal에 커서를 대면 타입이 좁혀졌음을 확인할 수 있다.

 

 

Cat 타입인지 확인하는 타입가드 함수를 만들면 다음과 같다.

// 객체가 Cat 타입인지 확인하는 함수
function isCat(animal: Animal): animal is Cat{
    return (animal as Cat).isScratch !== undefined;
};

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의