[TypeScript] JavaScript 슈팅게임에 TypeScript 적용하기! #5 - DOM 조작에 대한 Type Narrowing

Narrowing

'축소'라는 뜻으로 타입가드를 통해서 정확한 타입이 아닐시에 해당 코드가 잘못 실행이 되지 않도록
사전에 방지해주는 방식이라고 생각해주시면 됩니다!
오늘 해볼 것은 DOM에 조작에 대한 Narrowing방법입니다.

다음의 코드를 Narrowing 해보겠습니다.

const $startScreen = document.querySelector<HTMLDivElement>("#start_screen")
$startScreen.style.display = "flex";

// '$startScreen' is possibly 'null'.
// '$startScreen'가 'null'일 수 있다라는 에러메세지

1. 조건문

const $startScreen = document.querySelector<HTMLDivElement>("#start_screen")
if ($startScreen !== null) { // $startScreen가 null이 아니면
  $startScreen.style.display = "flex";
}

2. intanceof

const $startScreen = document.querySelector<HTMLDivElement>("#start_screen")
if ($startScreen instanceof HTMLDivElement) {
  $startScreen.style.display = "flex";
}

3. as

const $startScreen = document.querySelector("#start_screen") as HTMLDivElement
$startScreen.style.display = "flex";

as는 document.querySelector("#start_screen")가 HTMLDivElement이다라고 확정을 짓는 방식입니다.
하지만 진짜로 null인 경우에도 확정을 짓기 때문에 주의해서 사용을 해야합니다.

4. optional chaining

const $startScreen = document.querySelector<HTMLDivElement>("#start_screen")
if ($startScreen?.style) {
  $startScreen.style.display = "flex";
}

optional chaining은 ?를 붙이면 되는데, 이 뜻은 $startScreen에 style이 있으면 실행하고,
없으면 undefined를 반환하는 문법입니다.

코드 수정

이러한 Narroiwing방법을 이용하여 Game에 changeScreen부분과 main을 수정을 했습니다.

private changeScreen(screen: string) {
  if (screen === "start") {
    if ($startScreen instanceof HTMLDivElement 
        && $canvasScreen instanceof HTMLDivElement
        && $gameOver instanceof HTMLDivElement) {
      $startScreen.style.display = "flex";
      $canvasScreen.style.display = "none";
      $gameOver.style.display = "none";
    }
  } else if (screen === "game") {
    if ($startScreen instanceof HTMLDivElement 
        && $canvasScreen instanceof HTMLDivElement
        && $gameOver instanceof HTMLDivElement) {
      $startScreen.style.display = "none";
      $canvasScreen.style.display = "flex";
      $gameOver.style.display = "none";
    }
  } else if (screen === "gameOver") {
    if ($gameOver instanceof HTMLDivElement) {
      $gameOver.style.display = "block";
    }
  }
}
main() {
  if (gameOver) {
    this.changeScreen("gameOver");
    this.quit();
    $replayBtn?.addEventListener("click", () => this.changeScreen("start"))
    return;
  }

  this.update();
  this.renderImage();
  requestAnimationFrame(() => this.main());
}

참고

TypeScript로 웹개발하려면 HTML 조지는법을 알아야