# 타입 가드(Type Guard)

타입 가드란 여러 개의 타입 중 원하는 타입으로 타입을 걸러내는 걸 말합니다. 여기서 걸러낸다는 말은 여러 개의 타입 중 하나의 타입으로 타입을 좁힌다는 의미와 같습니다.

# 타입 가드 예시

타입 가드를 이해하기 위해서 간단한 코드를 보겠습니다.

type Age = 'string' | 'number'

이 코드는 Age의 타입이 문자열 또는 숫자가 될 수 있다는 의미입니다. 만약 이 타입을 함수의 파라미터로 사용하면 어떻게 될까요?

function getAge(age: Age) {
  // ...
}

파라미터 agegetAge() 함수 안에서 문자열 타입이거나 숫자 타입입니다. 만약 함수 안에서 age 파라미터의 문자열 길이를 구하려고 하면 에러가 발생합니다.

function getAge(age: Age) {
  age.length; // 에러 발생
}

왜냐하면 age의 타입이 문자열일뿐만 아니라 숫자일 수도 있기 때문이죠. 타입 관점에서는 age의 타입이 문자열이라는 걸 보장해줘야 안전하게 length 속성에 접근할 수 있습니다.

function getAge(age: Age) {
  if (typeof age === 'string') {
    age.length; // 정상 동작
  }
}

이처럼 여러 개의 타입 중 내가 원하는 타입으로 좁히거나 걸러내는 걸 타입 가드라고 합니다.

# 타입 가드 연산자

앞에서 본 typeof 뿐만 아니라 instanceof 라는 연산자 역시 여러 개의 타입 중 하나의 타입으로 걸러낼 수 있습니다. 자세한 사용법은 아래 문서를 참고하세요.

# 커스텀 타입 가드 함수

typeofinstanceof 연산자 말고도 is를 이용해서 타입 가드 역할을 하는 함수를 만들 수 있습니다. 커스텀 타입 가드 함수의 예시입니다.

function isString(age: string | number): age is string {
  return typeof age === 'string';
}

isString() 함수는 문자열이거나 숫자인 타입을 받아서 문자열 타입으로 좁혀주는 커스텀 타입 가드 함수입니다. 이 함수를 사용하는 방법은 다음 코드에 나와 있습니다.

 
 
 
 








// 커스텀 타입 가드 함수
function isString(age: string | number): age is string {
  return typeof age === 'string';
}

function getAge(age: string | number) {
  if (isString(age)) {
    // 이 블록에서 age의 타입은 문자열로 추론됨
    age.length;
  }
}

앞에서 살펴본 getAge() 함수 안에서 typeof 라는 연산자 대신에 isString() 커스텀 타입 가드 함수를 적용했습니다. if 문 안에서 age의 타입은 동일하게 문자열로 인식됩니다.

이처럼 타입 가드 함수를 이용하여 특정 시점에 원하는 타입으로 추론되도록 타입을 걸러낼 수 있습니다.

TIP

참고로 위 코드는 굳이 커스텀 타입 가드 함수를 이용하지 않고 typeof로만 해도 됩니다. 커스텀 타입 가드 함수는 여러 개의 객체 타입을 하나의 타입으로 좁힐 때 위력을 발휘합니다 😃