TypeScript - 타입 가드(Guard)

타입 가드(Guard)란?

• 타입 추론이 가능한 특정 범위(scople) 안에서 타입을 보장한다

instanceof

const btn = document.querySelector("button");
if (btn instanceof HTMLButtonElement) {
  btn.classList.add("btn");
  btn.id = "abc";
}

const btn = document.querySelector("button");
if (btn) {
  btn.classList.add("btn");
  btn.id = "abc";
}

instanceof 를 사용하여 명시적으로 표현해도 되지만 null이 아닌 경우에만 동작하도록 표현해도 괜찮다

typeof

function toTwoDecimals(val: number | string) {
  if (typeof val === "number") {
    val.toFixed(2);
  } else {
    val.slice(0, 2);
  }
}

is

type UserA = { name: string; age: number };
type UserB = { id: string; email: string };

function isUserA(user: unknown): user is UserA {
  if (user && user.constructor === Object) {
    const u = user as UserA; // user를 UserA처럼 사용하기 위해 타입 단언
    return typeof u.name === "string" && typeof u.age === "number";
  }
  return false;
}
fetch("URL")
  .then((res) => res.json())
  .then((user: UserA | UserB) => {
    if (isUserA(user)) {
      console.log(user.name[0]);
      console.log(user.age - 10);
    }
  });