자바스크립트와 타입스크립트 typeof의 차이

자바스크립트에서 typeof는 변수의 타입을 가져오는 데 사용된다.

타입스크립트에서도 마찬가지지만, 이에 더해서 컴파일 타임에서의 타입 가드로 활용될 수 있다.

아래에서 볼 수 있듯이 컴파일 타임에서 타입을 체크하여 내로잉(narrowing)해주는 데 사용할 수 있다.

/* 타입스크립트 */

function multiple1(value: string | number) {
  return value * 2
  // The left-hand side of an arithmetic operation must be of 
  // type 'any', 'number', 'bigint' or an enum type.
}

function multiple2(value: string | number) {
  if (typeof value === "string") {
    return value.repeat(2);
  }
  return value * 2
} 

만약 위의 코드가 자바스크립트에서 작성되었다면, number가 아닌 value가 들어왔을 때의 에러를 컴파일이 아닌 런타임에서 잡아야 했을 것이다.

function multiple1(value) {
  return value * 2
}

console.log(multiple('asd')) // nan!!

function multiple2(value) {
  if (typeof value === "string") {
    return value.repeat(2);
  }
  return value * 2
} 

console.log(multiple2(false)) // 0!