财产元素＆＃39;在与HTMLFormElement的类型union上不存在

Question

尝试对form.elements对象进行解构时会出现此错误。

Property 'elements' does not exist on type 'HTMLElement | HTMLFormElement'. Property 'elements' does not exist on type 'HTMLElement'.

// in a class

domRefs: {[key: string]: HTMLFormElement | HTMLElement | null} = {
  myForm: null
}

onButtonClick = () => {
  const {a, b, c} = this.domRefs.myForm!.elements
}

我之前指定了HTMLFormElement，它的类型也比HTMLElement更具体，为什么它没有被正确识别？

使用HTMLFormElement & HTMLElement确实适用于此特定情况，但这是处理此问题的正确方法吗？

Answer 1

如果使用union类型定义元素类型，要访问typescript中元素的特定于类型的属性，首先应检查元素类型。

if (this.domRefs.myForm instanceof HTMLFormElement) {
    // Your code specific for HTMLFormElement here
}

“使用HTMLFormElement＆amp; HTMLElement”以这种方式告诉编译器您的元素具有在两种类型中定义的所有功能。但在你的情况下，这是完全没用的，因为HTMLFormElement扩展了HTMLElement，它已经具备了它的所有功能。

P.S。有关类型的更多信息，请阅读here。