타입 좁히기

매개변수 value의 타입이 number | string이므로 함수 내부에서 위와같은 메서드를 사용하려고 하면 오류가 발생한다.

따라서 아래와 같이 조건문을 이용해 value의 타입을 보장해줘야 한다.

이렇게 조건문을 이용해 조건문 내부에서 변수가 특정 타입임을 보장하면 해당 조건문 내부에서는 변수의 타입이 보장된 타입으로 좁혀진다.

이 때, if (typeof === ···)처럼 조건문과 함께 사용해 타입을 좁히는 표현들을 타입 가드라고 부른다.

instanceof 타입가드

function func(value: number | string | Date) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else if (typeof value === "object") {
    console.log(value.getTime());
  }
}

위 코드에서 value의 타입에 하나의 union을 더 붙여서 null값도 들어올 수 있다고 가정을 해보면 다음과 같은 오류가 발생한다.

자바스크립트 연산자인 typeof는 null값에 typeof를 해도 object를 반환하기 때문에typeof value === 'object라는 조건문은 Date객체 값 뿐 아니라 null값도 통과할 수 있다.

따라서, 조건문 내부에서 value의 타입이 Date객체일 것이라고 보장할 수 없게되는 것이다.

이럴 때 instanceof를 이용하여 내장 클래스 타입을 보장할 수 있는 타입가드를 만들 수 있다.

instanceof 연산자는 왼쪽에 있는 값이 오른쪽에 instance인지 물어보는 연산자로, 맞으면 true를 반환하고 아닐 경우 false를 반환한다.

그러나 instanceof는 내장 클래스 또는 직접 만든 클래스에만 사용이 가능한 연산이므로 우리가 직접 만든 타입과 함께 사용할 수는 없다.

in 타입가드

우리가 직접 만든 타입과 함께 사용하려면 다음과 같이 in연산자를 이용해야 한다.

이 때, in연산자 뒤에는 null이나 undefined값이 들어오면 안되기 때문에 아래와 같이 &&연산자를 활용해서 value가 있을 때에만 age가 value에 있는지 검사하면 된다.