[TS] 타입 좁히기

타입 좁히기 (Type Narrowing)

조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법을 말한다.

function func(value: number | string){
  value.Fixed();  // ❌
  value.toUpperCase();  // ❌
}

위 코드에서 value는 number 또는 string 타입일 수 있기 때문에, toFixed()(number 메서드)와 toUpperCase()(string 메서드)를 바로 사용할 수 없다.

 

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

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

 

이 때, 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 vluae === 'object'라는 조건문은 Date객체 값 뿐 아니라 null값도 통과할 수 있기 떄문에 value의 타입이 Date객체일 것이라고 보장할 수가 없다.
null값이 조건문을 통과하면 getTime() 메서드를 호출할 수 없으므로 타입 오류가 발생하는 것이다.

 

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

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

 

그러나 instanceof는 클래스 타입에만 사용이 가능하므로, 직접 정의한 타입 객체와는 사용할 수 없다.

 

in 타입가드

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

else if ("age" in value){
  // ...
}

이 때, in 연산자 뒤에는 null이나 undefined값이 들어오면 안되기 때문에 먼저 value가 존재하는지 확인한 후, age프로퍼티가 있는지 검사해야 한다.

else if (value && "age" in value){
  console.log(`${value.name}은(는) ${value.age}살 입니다.`);
}