时间戳

首页 > 解决方案 > TSLint '类型上不存在属性' VS firefox 调试器行为

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

问题描述

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

在我的公司，我们使用 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 调试器显示该属性非常感兴趣。

标签： javascripttypescripttslint

解决方案

首先回答你的问题：为什么 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;

推荐阅读