13. 타입 가드

CHOYEAH·2023년 11월 5일
0

TypeScript

목록 보기
13/23
post-custom-banner
interface Developer {
    name: string;
}

interface Pserson {
    name: string;
    age: number;
}

function introduce(): Developer | Person {
    return { name: 'choyeah', age: 30, skill: 'ts'}
}

var choyeah = introduce();
console.log(choyeah.);

유니온 타입으로 리턴 타입을 정의하였을 경우 함수 내부에서 skill을 명시하여 리턴했음에도 불구하고 리턴된 값에서는 정의한 두 인터페이스의 공통된 속성만 접근할 수 있다.

interface Developer {
    name: string;
    skill: string;
}

interface Pserson {
    name: string;
    age: number;
}

function introduce(): Developer | Person {
    return { name: 'choyeah', age: 30, skill: 'ts'}
}

var choyeah = introduce();

if((choyeah as Developer).skill) {
   const skill = (choyeah as Developer).skill; 
    console.log(skill);
} else if ((choyeah as Person).age) {
    const age = (choyeah as Person).age;
    console.log(age); 
}

위와 같이 타입 단언을 사용하여 공통이 아닌 속성에 접근할 수 있지만 반복되는 코드를 작성할 수 밖에 없게된다.

타입가드 예제


다음의 코드는 타입가드의 예제로 실제 많이 사용되는 패턴이다.

함수 내부에서는 타입 단언을 통해 특정 속성의 존재 여부를 확인하여 True / False를 리턴한다. 리턴 타입에는 is 키워드를 사용하여 Developer 타입으로 정의하였다.

// 타입 가드 정의
function isDevelloper(target: Developer | Person): target is Developer {
    return (target as Developer).skill !== undefined;
}
if(isDevelloper(choyeah)){
    console.log(choyea.skill);
} else { // Person 타입
    console.log(choyeah.age);
}

위와 같이 타입 가드를 작성하여 타입 추론을 도울 수 있다.

profile
Move fast & break things
post-custom-banner

0개의 댓글