属性'value'在'type为'HTMLElement'的值上不存在。

6 浏览
0 Comments

属性'value'在'type为'HTMLElement'的值上不存在。

我正在尝试使用Typescript创作一个脚本，该脚本将在输入框中输入文本时更新p元素。

HTML如下：

 

 

greeter.ts文件如下：

function greeter(person)
{
    return "Hello, " + person;
}
function greet(elementId)
{
    var inputValue = document.getElementById(elementId).value;
    if (inputValue.trim() == "")
        inputValue = "World";
    document.getElementById("greet").innerText = greeter(inputValue);
}

当我使用tsc编译时，我会得到以下“错误”：

/home/bjarkef/sandbox/greeter.ts(8,53): The property \'value\' does not exist on value of type \'HTMLElement\'

然而，编译器确实会输出一个JavaScript文件，并在chrome中正常工作。

我为什么会收到这个错误？我该如何修复它？

此外，我在哪里可以查找在TypeScript中\'HTMLElement\'类型的哪些属性是有效的？

请注意，我是JavaScript和Typescript的新手，所以我可能会错过一些显而易见的东西。 ：）

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

如果您正在使用 React，可以使用 as 运算符。

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;

0
0 Comments

根据Tomasz Nurkiewicz的回答，“问题”在于TypeScript是类型安全的。 🙂 因此，document.getElementById()返回类型为HTMLElement，它不包含value属性。而子类型HTMLInputElement包含value属性。

所以一个解决方案是将getElementById()的结果强制转换为HTMLInputElement，像这样：

var inputValue = (document.getElementById(elementId)).value;

<>是TypeScript中的转换操作符。请参见问题TypeScript：转换HTMLElement。

如果您在.tsx文件中，上面的强制转换语法会报错。您应该使用以下语法：

(document.getElementById(elementId) as HTMLInputElement).value

上面的语句生成的JavaScript代码如下：

inputValue = (document.getElementById(elementId)).value;

即不包含类型信息。

0