类型'VS firefox调试器行为上不存在TSLint'属性

Question

第一：对不起那个不精确的头衔。我会澄清这个问题。

在我的公司，我们使用TypeScript / React / JavaScript开发Web应用程序。我使用VS代码作为IDE与eslint启用。我继续前同事的工作。

存储在变量中的HTMLElement会在其上调用querySelector-function。目的是获取id为“someID”的元素/标签，并获取此元素的'offsetTop'值：

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

在VS Code中，tslint引发错误“属性'offsetTop'在'Element'类型上不存在。”这是因为querySelector返回Element类型的元素，但是为HTMLElement定义了属性'offsetTop'。

现在，当我使用Chrome调试器时，在'const tmp = ...'行中断并通过将鼠标指针移动到变量上来显示'tmp'的属性，它显示属性'offsetTop'。

为什么？

提前致谢

编辑

我现在的解决方案是：

const offset_top = tmp.firstChild.parentElement.offsetTop;

哪个工作，但我仍然非常感兴趣为什么firefox调试器显示该属性。

Answer 1

首先回答你的问题：为什么tslint提出“Property'offsetTop'在'Element'类型上不存在。这是因为Typescript有一些类型定义，默认类型和自定义类型。对于typescript元素是自定义类型，默认类型是数字，字符串，布尔值和任何。所以当你使用querySelector返回一个类型为Element的结果时，这又将const tmp的类型更改为Element，因为你没有为它声明任何类型。 参考：https://www.typescriptlang.org/docs/handbook/basic-types.html 解决方案：通过这样做来自己设置常量的类型：

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