首页 文章

属性'value'在'HTMLElement'类型的值上不存在

提问于
浏览 次
136

我正在玩打字稿，我正在尝试创建一个脚本，在输入框中输入文本时将更新p元素 .

html看起来如下：

<html>
    <head>
    </head>
    <body>
        <p id="greet"></p>
        <form>
            <input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
        </form>
    </body>
    <script src="greeter.js"></script>
</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 编译时，我得到以下"error"：

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

但是编译器确实输出了一个javascript文件，它在chrome中运行得很好 .

How come I get this error? And how can I fix it?

另外，根据打字稿，我在哪里可以查找哪些属性在 'HTMLElement' 上有效？

请注意我对javascript和打字稿很新，所以我可能会遗漏一些明显的东西 . :)

javascript typescript

8 回答

  • 24

    快速解决此问题的方法是使用[]选择属性 .

    function greet(elementId) {
    var inputValue = document.getElementById(elementId)["value"];
    if(inputValue.trim() == "") {
        inputValue = "World";
    }
    document.getElementById("greet").innerText = greeter(inputValue);
}

    我只是尝试了几种方法并找到了这个解决方案，
    我不知道原始脚本背后的问题 .

    供参考，您可以参考Tomasz Nurkiewicz的帖子 .

    回复于
  • 14

    对于使用Props或Refs等属性而没有“DocgetId”的人，您可以：

    ("" as HTMLInputElement).value;

    倒置引号是你的道具值，所以一个例子就是这样：

    var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
    回复于
  • 10

    根据Tomasz Nurkiewiczs的回答，"problem"是打字稿是类型安全的 . :)所以 document.getElementById() 返回的类型 HTMLElement 不包含 value 属性 . 但是，子类型 HTMLInputElement 包含 value 属性 .

    所以解决方案是将 getElementById() 的结果转换为 HTMLInputElement ，如下所示：

    var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

    <> 是打字稿中的转换操作符 . 请参阅问题TypeScript: casting HTMLElement .

    上面的行中生成的javascript如下所示：

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

    即不包含类型信息 .

    回复于
  • 281

    尝试将要更新的元素强制转换为HTMLInputElement . 如其他答案中所述，您需要向编译器提示这是特定类型的HTMLElement：

    var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);
    回复于
  • 35

    如果您正在使用react，则可以使用 as 运算符 .

    let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
    回复于
  • 3

    问题出在这里：

    document.getElementById(elementId).value

    您知道从 getElementById() 返回的 HTMLElement 实际上是从它继承的 HTMLInputElement 的实例，因为您传递的是输入元素的ID . 类似地，在静态类型的Java中，这将无法编译：

    public Object foo() {
  return 42;
}

foo().signum();

    signum() 是 Integer 的方法，但编译器只知道 foo() 的静态类型，即 Object . 并且 Object 没有 signum() 方法 .

    但编译器无法知道，它只能基于静态类型，而不能基于代码的动态行为 . 就编译器所知， document.getElementById(elementId) 表达式的类型没有 value 属性 . 只有输入元素才有 Value .

    有关参考，请在MDN中检查HTMLElement和HTMLInputElement . 我认为Typescript或多或少与这些一致 .

    回复于
  • -1

    更新示例：

    const inputElement: HTMLInputElement = document.getElementById('greet') as HTMLInputElement
const inputValue: string = InputElement.value

    文档：

    TypeScript - Basic Types - Type assertions

    回复于
  • 8

    问题：

    错误“HTMLElement”类型中不存在属性“text”

    解决方案：在typeScript中我们需要转换 document.getElementById() ，它在 < HTMLScriptElement > 中返回 HTMLElement 类型

    所以我们可以按照以下方式解决错误 typescript.js

    Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;

    它对我有用..希望它也适合你 .

    回复于

相关问题