[TypeScript] Property 'offsetTop' does not exist on type 'Element'.ts(2339) 오류

Intro

타입스크립트를 사용하던 도중 아래와 같은 에러가 발생하였습니다. 

 

Property 'offsetTop' does not exist on type 'Element'.ts(2339)

 

Why?

document.querySelector('.page').offsetTop

다음의 코드가 있다고 가정해봅시다. 이 코드는 맞는 코드이지만, 결과값이 null이 될 수 있으므로 null 체크를 해줘야 합니다. 

 

두번째로는, 현재 리턴 타입은 Element입니다. 하지만 Element는 offsetTop이라는 프로퍼티를 갖고 있지 않습니다. HtmlElement로 반환될 것이라고 예상할 순 있지만, SVGElement가 될 수 있기 때문에 컴파일러에게는 이 정보가 정확하지 않습니다. 따라서 이 부분 역시 type-assertion을 통해 수정해줘야 합니다. 혹은 런타임 중 체크를 하셔도 됩니다. 

How to solve the problem

null-check

const element = document.querySelector('.page');
if (element !== null) { ... }

type-assertion

element as HTMLElement

runtime-check

if (element instanceof HTMLElement) {}

---

https://github.com/microsoft/TypeScript/issues/34694