TypeScript中通过索引访问EventTarget元素报错，如何解决？

错误原因 #

你遇到的报错是因为**EventTarget类型不支持数字索引访问**，而你代码里的event.target as HTMLInputElement;只是做了类型断言但没有赋值给变量，相当于无效操作——原event.target的类型依然是EventTarget，自然无法通过[0]获取子元素。

另外，表单提交事件的target本质是表单元素（HTMLFormElement），而非输入框（HTMLInputElement），HTMLFormElement才具备类似数组的索引能力来访问内部控件。

解决方案 #

下面提供两种可靠的修复方式：

方式一：正确断言event.target为HTMLFormElement

将断言后的结果赋值给变量，再通过变量访问子元素：

counterForm.addEventListener("submit", event => {
  event.preventDefault();
  // 断言target为表单元素，并赋值给变量
  const form = event.target as HTMLFormElement;
  if (form) {
    console.log(form[0]); // 此时类型检查通过
  }
});

方式二：使用event.currentTarget（更稳妥）

currentTarget始终指向绑定事件的元素（也就是你获取的counterForm），类型更可靠，无需额外判断存在性：

counterForm.addEventListener("submit", event => {
  event.preventDefault();
  // currentTarget是绑定事件的表单元素，类型直接断言为HTMLFormElement
  const form = event.currentTarget as HTMLFormElement;
  console.log(form[0]);
});

进阶优化：使用form.elements（更清晰）

推荐通过form.elements访问表单控件，可读性更强，还能通过控件的name属性精准获取：

counterForm.addEventListener("submit", event => {
  event.preventDefault();
  const form = event.currentTarget as HTMLFormElement;
  // 通过索引获取第一个控件
  console.log(form.elements[0]);
  // 或者通过name属性获取（假设输入框name为"counterInput"）
  console.log(form.elements.namedItem("counterInput"));
});

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