StencilJs值在“元素”类型上不存在

Question

我想在加载页面时设置离子输入字段的值。 我正在尝试使用shadowDom从shadowRoot querySelector获取元素。 这是带有 ionic 的模具项目。该组件使用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');

编辑： 当然，该解决方案也可以像他所举的例子那样作为一线工作。 (this.el.shadowRoot.querySelector('#name') as HTMLInputElement).value

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

Answer 1

按照您所说的那样设置值，但是出现错误的原因是消息Property 'value' does not exist on type 'Element'。要用不同的措词来帮助您理解，消息是：

• 您有Element类型的物品
• 该类型的类型定义上不存在value属性

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

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

以上摘录摘自以下相关问题，并已更新为与您的变量名匹配。

我在这里回答是因为您提到了模板，但与问题无关，但是此问题是重复的，可以在Property 'value' does not exist on type 'EventTarget'和Property 'value' does not exist on type EventTarget in TypeScript上找到类似问题的答案