Question

尝试在输入类型为https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number的输入类型上使用方法stepUp时遇到问题

这是我要运行的代码：

var box = document.getElementById("box");
var inputNode = box.querySelectorAll(".increment-input");

inputNode[0].stepUp(6);

<div id="box">
  <input type="number" step="1" value="1" class="increment-input">
</div>

打字稿抛出：

类型“元素”上不存在属性“ stepUp”。

http://www.typescriptlang.org/play/#src=%20%20%20%20%20%20%20%20var%20box%20%3D%20document.getElementById(%22box%22)%3B%0D%0A%20%20%20%20%20%20%20%20var%20inputNode%20%3D%20box.querySelectorAll(%22.increment-input%22)%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20inputNode%5B0%5D.stepUp()%3B

谢谢

Answer 1

问题是TypeScript为了提供类型安全性，说您的列表inputNode是NodeListOf<Element>，因为querySelectorAll()可以返回可能出现的任何HTML元素的列表。因此，如果您非常确定当前Element的实际类型，则必须将其强制转换为该类型。然后，您将可以使用其特定功能。

public collectAndStepUp(): void {
    const box = document.getElementById("box");
    const inputNode = box.querySelectorAll(".increment-input");

    // type cast from Element to HTMLInputElement
    const htmlInputElement = inputNode[0] as HTMLInputElement;
    htmlInputElement.stepUp(5);
}

应该可以解决问题。

TypeScript stepUp方法在输入类型编号上引发错误

1 个答案: