typescript TS(7015)文件格式:元素隐式地具有“any”类型,因为索引表达式不是“number”类型

j2qf4p5b  于 2023-10-22  发布在  TypeScript
关注(0)|答案(2)|浏览(181)

我正在尝试获取用户在表单中输入的值。
我的表单看起来是这样的:

<form name="myForm">
   <span class="myFormSpan">+</span>
   <input type="text" placeholder="My answer" name="myFormUserInput">
   <button type="button" class="formButton">Ok</button>
</form>

我想得到用户在输入表单中输入的内容,所以我的类型脚本代码看起来像这样:

formInputs.addEventListener("click", () => {
   const userInput: any = document.forms["myForm"].elements["myFormUserInput"].value;
   console.log(userInput);
});

它工作正常,除了我一直收到TypeScript警告ts(7015) : Element implicitly has an 'any' type because index expression is not of type 'number'.。我试着将代码改为document.forms[0],但没有删除警告,并尝试在这里和那里添加一些类型规范,但没有更成功。
我想保留隐含的警告(与那里写的解决方案相反:Element implicitly has an 'any' type)因为我想了解这个问题,并有办法解决它
有什么想法吗?
多谢了!

kkbh8khc

kkbh8khc1#

在窗体和元素上使用基于数字的索引应该可以清除该警告。

formInputs.addEventListener("click", () => {
    const userInput: any = (document.forms[0].elements[0] as HTMLInputElement).value;
    console.log(userInput);
});

但你真的应该考虑使用document. queryList()

这将找到正确的表单/输入,而不管DOM中的位置或顺序如何
像这样:

formInputs.addEventListener("click", () => {
    const userInput = document.querySelector<HTMLInputElement>('form[name="myForm"] input[name="myFormUserInput"]') || null

    if (userInput !== null)
        console.log(userInput.value);
});
chhqkbe1

chhqkbe12#

考虑使用FormData对象,而不是使用HTML Form元素的elements属性。这样,您就可以通过输入名称查找表单值。

formInputs.addEventListener("click", () => {
    const formdata = new FormData(document.forms["myForm"] as HTMLFormElement);
    const userInput = formdata.get('myFormUserInput');
    console.log(userInput.toString());
});

相关问题