解构form.elements遇TS类型错误，如何不使用any类型解决？

这个问题我之前在项目里也碰到过，TypeScript对HTMLFormControlsCollection的类型约束确实比较严谨，不过完全不用依赖any就能搞定，给你几个实用的方案：

方案1：类型断言为带字符串索引的对象 #

直接把elements断言成包含你表单实际控件类型的索引对象，解构时TypeScript就会认可这个操作：

onButtonClick = () => {
  // 根据表单内实际元素类型调整，比如加入HTMLSelectElement、HTMLTextAreaElement等
  const formElements = this.domRefs.myForm!.elements as { 
    [key: string]: HTMLInputElement | HTMLSelectElement 
  };
  const {a, b, c} = formElements;
}

如果不想太细致，也可以用更宽泛的Element类型覆盖所有表单控件：

const {a, b, c} = this.domRefs.myForm!.elements as { [key: string]: Element };

方案2：用namedItem()安全获取元素 #

HTMLFormControlsCollection原生提供了namedItem()方法按名称获取元素，虽然不能直接解构，但胜在类型安全，不需要额外的宽泛断言：

onButtonClick = () => {
  const elements = this.domRefs.myForm!.elements;
  // 这里的断言是为了把返回的Element|null缩小到具体控件类型，方便后续操作value等属性
  const a = elements.namedItem('a') as HTMLInputElement;
  const b = elements.namedItem('b') as HTMLInputElement;
  const c = elements.namedItem('c') as HTMLInputElement;
  
  // 后续正常使用a、b、c即可
}

方案3：自定义可复用的扩展类型 #

如果项目里经常需要处理表单元素解构，可以全局或组件内定义一个带字符串索引的扩展类型，后续复用更方便：

// 定义扩展类型
interface TypedFormControls extends HTMLFormControlsCollection {
  [key: string]: Element | undefined;
}

// 使用时
onButtonClick = () => {
  const {a, b, c} = this.domRefs.myForm!.elements as TypedFormControls;
}

为什么会出现这个错误？ #

TypeScript在定义HTMLFormControlsCollection时，并没有添加字符串索引签名——它只规范了通过数字索引或者namedItem()方法访问元素，所以直接用解构语法（本质是通过字符串键访问对象）会触发类型检查错误。

内容的提问来源于stack exchange，提问作者Qwerty