StencilJs 值在类型 'Element' 上不存在

StencilJs value does not exist on type 'Element'

我想在加载页面时设置离子输入字段的值。 我正在尝试使用 shadowRoot querySelector 从 shadowDom 获取元素。 这是一个带有 ionic 的 stencil 项目。该组件使用 shadowDOM。 当我尝试获取值时，我的 IDE 说：

姓名El：

const nameEl = this.el.shadowRoot.querySelector('#name');

该值将被正确设置，但我想知道如何修复此错误消息。

编辑： Ash 建议的答案是正确的。就像 Ash 提到的那样，有两种方法可以实现这个解决方案。但是我想知道解决方案之间是否有任何区别？

const nameEl = this.el.shadowRoot.querySelector('#name') as HTMLInputElement;

或

const nameEl: HTMLInputElement = this.el.shadowRoot.querySelector('#name');

编辑： 该解决方案当然也像 Ash 他的示例中那样作为单线工作。 (this.el.shadowRoot.querySelector('#name') as HTMLInputElement).value

在我的例子中，输入是离子输入： (this.el.shadowRoot.querySelector('#name') as HTMLIonInputElement).value

设置值如您所说，但错误原因如消息所述Property 'value' does not exist on type 'Element'。以不同的方式表达以帮助您理解，消息是这样说的：

  • 你有Element
    • 类型的东西
  • value 属性 在那个东西的类型定义中不存在

因此，您需要更正代码以获得正确类型的元素，或者在您的情况下告诉代码期望什么。

(<HTMLInputElement>nameEl).value
// OR
(nameEl as HTMLElement).value

以上片段摘自以下相关问题并进行了更新以匹配您的变量名称。

我在这里回答是因为你提到了 Stencil 但与问题无关，但是这个问题是重复的，类似问题的答案可以在 and

找到