TSLint 'property does not exist on type' VS firefox 调试器行为

Question

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

在我的公司，我们使用 TypeScript/React/JavaScript 开发 Web 应用程序。我在启用 tslint 的情况下将 VS Code 用作 IDE。我继续前任 co-worker.

的工作

有一个 HTMLElement 存储在一个变量中，querySelector-function 被调用。意图是得到id为"someID"的element/tag，得到这个元素'offsetTop'的值：

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

在 VS Code 中，tslint 引发错误 "Property 'offsetTop' does not exist on type 'Element'." 这是因为 querySelector returns 是一个 Element 类型的元素，但是属性 'offsetTop' 是为 HTMLElement 定义的。

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

为什么？

提前致谢

编辑

我现在的解决办法是：

const offset_top = tmp.firstChild.parentElement.offsetTop;

这是有效的，但我仍然很想知道为什么 firefox 调试器显示属性。

Answer 1

首先回答你的问题：为什么 tslint 提出“属性 'offsetTop' 在类型 'Element' 上不存在。这是因为 Typescript 定义了一些类型集，默认类型和自定义类型。对于 typescript 元素是自定义类型并且默认类型是数字、字符串、布尔值和任何类型。因此，当您使用 querySelector returns 类型为 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;

TSLint 'property does not exist on type' VS firefox 调试器行为

TSLint 'property does not exist on type' VS firefox debugger behavior

javascript

typescript

tslint