[타입스크립트 입문 - 기초부터 실전까지] 타입 가드

EJ·2020년 11월 25일
0

Typescript

목록 보기
15/25
post-thumbnail

타입 가드를 위한 예제 소개

interface Developer {
    name: string;
    skill: string;
}
interface Person {
    name: string;
    age: number;
}
function introduce(): Developer | Person {
    return { name: 'Tony', age: 30, skill: 'Iron Making' }
}
var tony = introduce();
console.log(tony.skill); // tony.skill에 접근할 수 없다.
  • 유니온 타입을 사용하게 되면 사용한 타입들의 공통된 속성에만 접근할 수 있다.
    따라서, 공통되지 않은 속성에 접근하고 싶을 때 '타입 단언'을 사용하면 된다.
if ((tony as Developer).skill) {
    var skill = (tony as Developer).skill;
    console.log(skill);
} else if ((tony as Person).age) {
    var age = (tony as Person).age;
    console.log(age);  
}
  • 하지만 타입 단언이 반복되면 가독성이 줄기 때문에 '타입 가드'를 사용하면 좋다.

타입 가드 소개와 적용

타입가드를 정의함으로써 true, false를 통해 해당 타입인지 아닌지 구분한 다음 해당 타입의 속성에 접근이 가능해진다.

타입 가드

//function is해당타입
인자 is 해당타입
// 타입 가드 정의
function isDeveloper(target: Developer | Person): target is Developer {
    return (target as Developer).skill !== undefined;
}

if (isDeveloper(tony)) { 
	// Developer타입일 경우
    console.log(tony.skill);
} else { 
	// Person 타입일 경우
    console.log(tony.age);
}
profile
주니어 프론트엔드 개발자 👼🏻

0개의 댓글