TSLint“类型上不存在属性” VS FireFox调试器行为

Question

First: sorry for that unprecise title. I will clearify the question.

In my company we develope web applications using TypeScript/React/JavaScript. I use VS Code as IDE with tslint enabled. I continue the work of a former co-worker.

There is a HTMLElement stored in a variable and the querySelector-function is called on it. The intent is to get the element/tag with the id "someID" and get the value of 'offsetTop' of this element:

// elem is the HTMLElement
const tmp = elem.querySelector('[id=" + someID + "');
const offset_top = tmp.offsetTop;

In VS Code tslint raises the error "Property 'offsetTop' does not exist on type 'Element'." This is because querySelector returns an element of type Element, but the property 'offsetTop' is defined for HTMLElement.

Now, when i use the Chrome debugger, break at the line 'const tmp = ... ' and show the properties of 'tmp' by moving the mouse pointer over the variable, it shows the property 'offsetTop'.

Why?

Thanks in advance

Edit

My solution now is:

const offset_top = tmp.firstChild.parentElement.offsetTop;

which is working, but i'm still very interested in why firefox debugger shows the property.

Answer 1

First Answering your question: Why tslint raises that "Property 'offsetTop' does not exist on type 'Element'. It is because Typescript has some set of types defined, default types and custom types. For typescript Element is custom type and default types are number, string,boolean and any. So when you use querySelector which returns a result whose type is Element this in turn change the type of const tmp to Element as you have not declared any type for it.
reference: https://www.typescriptlang.org/docs/handbook/basic-types.html
Solution: set type of your constant by yourself by doing this :

const tmp: any = elem.querySelector('[id=" + someID + "');
const offset_top = tmp.offsetTop;