보통 리액트같은 프레임워크를 통해 프론트엔드를 개발할 때는 document
객체의 querySelector
, getElementById
, getElementByClass
등으로 DOM에 직접 접근해서 조작하지는 않으나, 바닐라 자바스크립트나 타입스크립트로 프론트엔드를 개발하는 등 그 외의 경우에는 조작하는 경우가 있을 수 있다.
const num = document.getElementById("num");console.log(num); // <span id="num"></span>
평소 자바스크립트에서 DOM에 접근해 조작하던 방식처럼 하게 된다면, 콘솔 로그 상에서는 정상적으로 할당된 것 처럼 보인다.
const num = document.querySelector("span");num.innerText = "0"; // Error!
num.addEventListener("click", callback); // Error!
하지만, addEventListener
를 통해 이벤트를 위임하거나, innerText
를 통해 값을 넣어주는 경우 “Object is possibly ‘null'.
” 메세지의 에러가 발생한다.
document.querySelector
와 같은 DOM 선택자 메서드는 HTMLElement
혹은 null
을 반환하는데, HTMLElement
가 아닌 다른 타입으로 추론되었고, 그에 따라서 해당 변수 혹은 상수는 addEventListener
나 innerText
같은 메서드나 프로퍼티를 갖고있지 않기 때문이다.
이런 경우 타입 단언(Type Assertion)을 통해 에러를 해결할 수 있다.
const num = document.querySelector("span") as HTMLSpanElement;num.innerText = "0";
num.addEventListener("click", callback);
이런 식으로 타입 단언을 통해 타입 에러를 해결해준다면, 정상적으로 메서드와 프로퍼티에 접근할 수 있게 된다.