typescript - 类型 'HTMLFormControlsCollection' 没有属性 'x' 也没有字符串索引签名

Question

尝试解构form.elements 对象时出现以下错误:

Type 'HTMLFormControlsCollection' has no property 'x' and no string index signature

// in a class

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

onButtonClick = () => {
  console.debug(this.domRefs.myForm!.elements) // screenshot below
  const {a, b, c} = this.domRefs.myForm!.elements
}

我不想使用不会发出此错误的 : any 类型注释。

Answer 1

这是标准 DOM 定义库的限制(到 2021 年仍然如此)。以下是其中定义 HTMLFormControlsCollection 的方式 - 注意缺少字符串索引签名(这正是发生错误的原因):

interface HTMLFormControlsCollection extends HTMLCollectionBase {
    /**
     * Returns the item with ID or name name from the collection.
     * 
     * If there are multiple matching items, then a RadioNodeList object containing all those elements is returned.
     */
    namedItem(name: string): RadioNodeList | Element | null;
}

它的父接口(interface) HTMLCollectionBase 也缺少字符串索引签名(尽管有数字索引签名):

interface HTMLCollectionBase {
    /**
     * Sets or retrieves the number of objects in a collection.
     */
    readonly length: number;
    /**
     * Retrieves an object from various collections.
     */
    item(index: number): Element | null;
    [index: number]: Element;
}

但是，HTMLFormControlsCollection 根据定义应该有一个字符串索引签名(参见 the standard ):

element = collection[name]
radioNodeList = collection[name]
Returns the item with ID or name name from the collection.

因此，在一些声明合并的帮助下，我们可以修复遗漏:

interface HTMLFormControlsCollection extends HTMLCollectionBase {
  [item: string]: Element | RadioNodeList;
}