타입 가드

TypeScript 타입 가드로 DOM 요소 안전하게 다루기

문제 상황: "Object is possibly 'null'"
React와 TypeScript를 사용하여 개발하다 보면 다음과 같은 코드를 작성할 때가 있습니다 :

const scrollToNextSection = () => {
  const sections = [
    document.getElementById("title-section"),
    document.getElementById("input-section"),
  ];

  if (activeSection < sections.length - 1) {
    sections[activeSection + 1].scrollIntoView({ behavior: "smooth" });
  }
};

해당 코드에서 sections[activeSection + 1] : Object is possibly 'null'.ts(2531)라는 오류를 발생합니다

왜 이런 오류가 발생할까요? document.getElementById()는 해당 ID를 가진 요소를 찾지 못할 경우 null을 반환할 수 있기 때문입니다. TypeScript는 이 가능성을 포착하고 오류로 알려주는 것이죠.

해결 방법 : TypeScript 타입 가드 사용하기

const scrollToNextSection = () => {
    const sections = [
      document.getElementById("title-section"),
      document.getElementById("input-section"),
    ].filter((section): section is HTMLElement => section !== null);

    if (activeSection < sections.length - 1) {
      sections[activeSection + 1].scrollIntoView({ behavior: "smooth" });
    }
  };

타입 가드란 무엇인가?

타입 가드는 특정 스코프 내에서 변수의 타입을 보장하는 표현식입니다. 위 코드에서 (section): section is HTMLElement => section !== null은 타입 가드로, 다음과 같은 의미를 가집니다:

• section !== null이 true를 반환하면
• section의 타입은 HTMLElement입니다

이렇게 하면 필터링된 배열에는 null 값이 없고, 모든 요소가 HTMLElement 타입임을 TypeScript가 이해할 수 있게 됩니다.

HTMLElement란?

HTMLElement는 DOM(Document Object Model)에서 모든 HTML 요소의 기본 인터페이스입니다. div, section, article, h1, p, input, button 등 모든 HTML 태그는 기본적으로 HTMLElement의 인스턴스입니다.
일부 HTML 요소는 더 구체적인 인터페이스를 가지고 있습니다:

• input → HTMLInputElement
• button → HTMLButtonElement
• img → HTMLImageElement

하지만 이러한 모든 구체적인 요소 타입들도 HTMLElement를 상속받습니다. 따라서 HTMLElement 타입으로 모든 HTML 요소의 공통 속성과 메서드에 접근할 수 있습니다.

결론

TypeScript의 타입 가드는 DOM 요소와 작업할 때 발생할 수 있는 null 참조 오류를 방지하는 강력한 방법입니다. 특히 document.getElementById()나 querySelector() 같은 DOM API를 사용할 때 유용합니다.
타입 가드를 사용하면 코드가 더 안전해질 뿐만 아니라, TypeScript의 타입 추론 기능을 최대한 활용할 수 있어 개발 경험도 향상됩니다. 이는 특히 React와 같은 프레임워크에서 DOM 요소를 직접 조작해야 할 때 매우 유용합니다.
이러한 타입 시스템의 안전성은 TypeScript를 사용하는 주요 이점 중 하나이며, 런타임 전에 많은 잠재적 오류를 캐치할 수 있게 해줍니다.