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

Question

首先：很抱歉这个不准确的标题。我会澄清这个问题。

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

有一个HTMLElement 存储在一个变量中，并且在它上面调用了querySelector 函数。目的是获取 id 为“someID”的元素/标签，并获取该元素的“offsetTop”值：

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

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

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

为什么？

提前致谢

编辑

我现在的解决办法是：

const offset_top = tmp.firstChild.parentElement.offsetTop;

这是有效的，但我仍然对为什么 firefox 调试器显示该属性非常感兴趣。

Answer 1

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

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