보통 리액트같은 프레임워크를 통해 프론트엔드를 개발할 때는 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);
이런 식으로 타입 단언을 통해 타입 에러를 해결해준다면, 정상적으로 메서드와 프로퍼티에 접근할 수 있게 된다.