25. 타입 가드 소개 | 타입 가드 예시

타입 단언만을 사용했을때 생기는 문제

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

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

// 타입들의 공통 된 속성만 접근할수 있는게 유니온 타입
function introduce() : Developer | Person {
    return { name  : 'Tony', age : 33 , skill : 'Iron Making'}
}

var tony = introduce();
console.log(tony.skill); // 에러

// 타입 단언
if ((tony as Developer).skill) {
    var skill = (tony as Developer).skill;
    console.log((tony as Developer).skill);
} else if ((tony as Person).age){
    var age = (tony as Person).age;
    console.log(age);
}

• 타입들의 공통 된 속성만 접근할수 있는게 유니온 타입이라 skill은 없는게 된다.
• 근데 리턴값에 분명 skill을 넘겨줬음에도 불구하고 에러가 나서 아쉽다.
• 위의 코드처럼 타입 단언을 이용해서 해결할수 있지만 코드가 길어지고 가독성이 나빠진다.
• 이럴때 타입 가드를 사용해보자 

---

타입 가드 사용예시

var tony = introduce();


// 타입 가드 정의
function isDeveloper(target : Developer | Person) : target is Developer{ 
    // skill이 있으면 Developer 타입이다라고 넘겨준다.
    return (target as Developer).skill !== undefined;
}
if (isDeveloper(tony)) {
    tony.skill;    
} else{
    tony.age
}

• 타입가드 함수를 쓸때 is라는 패턴으로 주로 함수명을 짓는다.
• 함수 리턴타입에 사용한 is 키워드는 넘겨받은 파라미터가 실제로 해당 타입인지 구분하는 키워드다.
• target is Developer로 넘겨받은 파라미터가 Developer 타입인지 true, false로 응답해주기 때문에 타입 가드라 부른다.
• 타입 가드를 사용해서 Developer 일때의 tony 의 data, Person 일때의 tony의 데이터 모두 사용 가능하게 되었다.
• 실제 많이 사용되는 패턴이다.