[TS] TypeScript에서 HTMLElement 타입 지정하기

lee dango·2022년 7월 11일

HTMLElement | null ?

element.style.display = 'none';
이처럼 스크립트 안에서 HTML요소를 수정해야 할 때 당연히 그 타입은HTMLElement, null인 것 같다는 알림이 나오면 HTMLElement | null을 붙여주면 해결되겠다고 생각했으나 해당 오류가 발생했다.

'HTMLElement | null' 형식의 인수는 'HTMLElement' 형식의 매개 변수에 할당될 수 없습니다. 'null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다.
Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.ts

HTMLElement 타입을 가지는 두 가지 형태에 대한 처리를 메모해 두려 한다.

HTMLElement 변수 타입 지정

선언한 HTMLElement가 HTMLElement 또는 null로 잡히는 경우
'as HTMLElement' 추가

  let header = document.getElementById('header') as HTMLElement;

HTMLElement 인수 타입 지정

use-case에서 null 처리를 해주는 ' ! '를 추가한다.
'DivElement가 현재 비어있을 수도 있다'라는 표시.

     <button
       onClick={() => {
         handleDashboardPrint(
           document.querySelector('.dashboard-positive')!
           );
       }}
     ></button>

참고
https://stackoverflow.com/questions/63520680/argument-of-type-htmlelement-null-is-not-assignable-to-parameter-of-type-el

0개의 댓글