TypeScript中如何获取多个动态生成input输入框的输入值并解决类型报错？

解决方法 #

你遇到的报错是TypeScript的类型检查提示，document.getElementsByName返回的元素默认是通用HTMLElement类型，该类型没有value属性，你需要将其断言为<input>对应的HTMLInputElement类型即可。

TypeScript 写法：

// 直接对整个NodeList做类型断言
const criteria_elems = document.getElementsByName('criteria-field') as NodeListOf<HTMLInputElement>;

const values = []
criteria_elems.forEach((inputElem) => {
    // 这里可以直接读取value，没有类型报错
    console.log(inputElem.value)
    values.push(inputElem.value)
})
// values就是所有输入框的内容组成的数组

原生JavaScript 写法：

如果是纯JS环境没有TS类型检查，你的代码本身是可以直接运行拿到值的，如果你需要快速收集所有输入值可以直接写成：

const valueArr = Array.from(document.getElementsByName('criteria-field')).map(item => item.value)
console.log(valueArr)

注意：确保执行获取值的逻辑时，所有动态生成的输入框已经完全挂载到DOM树中，否则会出现获取不全的问题。

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