minstudio

타입 가드(Type Guard)와 사용자 정의 타입 가드(is)

여러 타입이 올 수 있는 상황(Union)에서, if문과 typeof, instanceof 등의 자바스크립트 기본 문법을 사용해 범위를 좁혀나가며 TS 컴파일러에게 안전을 증명하는 과정입니다.

🚦 갈림길의 표지판 (타입 가드) val (string | number) if (typeof val === 'string') 이 블록 안에서는 string else 블록에서는 number


단순한 typeof로는 커버할 수 없는 복잡한 객체들의 타입을 판별할 때, 개발자가 직접 타입 검문소를 만들어 반환값 is 타입명 형태로 직접 검증을 수행하는 고급 기법입니다.

🛂 맞춤형 출입국 심사대 (is 키워드) function isDog(pet: any): pet is Dog { ... } "이 조건을 통과하면, 의심할 여지 없는 완벽한 Dog 타입이다!" 수동 보증서 단순한 typeof로는 커버할 수 없는 복잡한 객체의 타입을 판별할 때 직접 검증을 수행
function processValue(val: number | string) {
    // val이 숫자인지 문자인지 TS는 아직 모름
    
    if (typeof val === "string") {
        // 이 중괄호 안에서는 TS가 "아! 여기서부터는 무조건 string이네!" 하고 확신함 (타입 좁히기)
        console.log(val.toUpperCase()); 
    } else {
        // 위에서 string이 걸러졌으니, 여기서는 자동으로 number로 취급!
        console.log(val.toFixed(2));
    }
}

// ---

interface Dog { bark(): void; }
interface Cat { meow(): void; }

// 이 함수가 true를 리턴하면, 파라미터 animal은 무조건 Dog 타입이라고 TS에게 알려주는 "is" 키워드!
function isDog(animal: Dog | Cat): animal is Dog {
    return (animal as Dog).bark !== undefined;
}

function playWith(animal: Dog | Cat) {
    if (isDog(animal)) {
        animal.bark(); // 여기서 animal은 완벽하게 Dog로 취급됨
    } else {
        animal.meow(); // 여기서는 자동으로 Cat으로 취급됨
    }
}
타입 가드(Type Guard)와 사용자 정의 타입 가드(is) | Minstudio