[Typescript] 타입 가드란? 타입 가드 개념과 쓰는 이유 예시로 파헤치기

 

안녕하세요, 윌입니다.

 

오늘은 타입 가드에 대한 설명과 사용 이유에 대해 파헤쳐 보겠습니다.

 

타입 가드에 대해 이해하기 위해선 먼저 Interface, 유니온 타입( | 연산자) 등에 대한 선행 학습이 필요합니다.

 

아래와 같은 2개의 interface가 있습니다. Developer와 Person은 name을 가지지만 각 skill, age를 가진다는 점에서 다릅니다.

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

 

 

tony라는 객체를 만들어보겠습니다. tony는 age, skill을 모두 가지는 객체입니다.

 

그러나 tony.skill 또는 tony.age로 접근 시 타입에러가 발생됩니다. 유니온 타입의 경우 공통된 속성만 접근할 수 있기 때문입니다.

function introduce(): Developer | Person {
  return {
    name: "tony",
    age: 30,
    skill: "js",
  };
}

let tony = introduce();

tony.skill //type error:'Developer | Person' 형식에 'skill' 속성이 없습니다. 
'Person' 형식에 'skill' 속성이 없습니다.ts(2339)

 

 

 

이 때 타입 가드를 사용합니다.

 

아래 예시를 보면 isDeveloper 함수를 선언하고, 해당 함수의 타입을 target is Developer로 선언하였습니다.

 

함수 타입을 Developer로 제한 함으로써 Developer의 속성인 skill에 접근할 수 있으며, 또한 if else를 이용해 Developer가 아닐 경우 Person으로 타입이 좁혀져 age에 접근이 가능합니다.

 

function isDeveloper(target: Developer | Person): target is Developer {
  return (target as Developer).skill !== undefined;
}

if (isDeveloper(tony)) {
  console.log(tony.skill); // type error 없음
} else {
  console.log(tony.age); // Person type으로 인식되어 age 접근이 가능함
}

 

 

이런 식으로 유니온 타입의 경우 타입 가드를 사용하여 타입 에러 없이 객체 속성에 접근할 수 있습니다.