Question

假设我有一个HTML元素，如下所示：

<progress value="1" max="10" id="site_progress"></progress>

如果我选择这样的元素，VSCode会显示一个问题（类型“元素”上不存在“属性“最大值””）

const progress = document.querySelector('#site_progress');
progress.max = 9;

如果我通过元素选择器选择，不会有问题：

const progress = document.querySelector('progress');
progress.max = 9;

我可以做一些类似类型断言的操作来避免这种行为吗？有什么好的做法可以在常规javascript中解决此问题？

Answer 1

就我个人而言，我只是搬到TS，但是即使那样，您仍然需要进行转换。要在JS中转换类型，您可以->

/** @type HTMLProgressElement */
const progress = document.querySelector('#id');
progress.max = 9;

在打字稿中，它就像->

const progress = document.querySelector('#id') as HTMLProgressElement;
progress.max = 9;

另一个不错的功能，您可以创建类型保护，这也有助于编译器。

例如，下面的代码在TS和JS中均适用。

const progress = document.querySelector('#id');
if (progress instanceof HTMLProgressElement)
    progress.max = 9;

上述内容的一个小问题是，如果#id不是Progress，它将静默继续。因此，另一种选择是引发异常，它也可以充当类型保护，但是当情况不正确时，您可以引发逻辑错误消息。

例如。

const progress = document.querySelector('#id');
if (!(progress instanceof HTMLProgressElement))
  throw new Error('#id not a progress');
progress.max = 9;

类型检查在常规JS文件中的VSCode中引发错误

1 个答案: