属性“value”在类型为“HTMLElement”的值中不存在

我玩周围的typescript，并试图创建一个脚本，将更新一个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>

还有迎宾员。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/ setter .ts(8,53):属性“value”在类型为“HTMLElement”的值上不存在

然而，编译器会输出一个javascript文件，这在chrome中工作得很好。

我怎么得到这个错误?我该怎么解决呢?

此外，我可以在哪里查找哪些属性是有效的“HTMLElement”根据typescript?

请注意，我对javascript和typescript很陌生，所以我可能会遗漏一些明显的东西。：）

当前回答

这对我来说很有用:

let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value

2019-11-04 18:40:18

其他回答

有一种方法可以在不使用类型断言的情况下实现这一点，即使用泛型，泛型通常使用起来更好、更安全。

不幸的是，getElementById不是通用的，但querySelector是:

const inputValue = document.querySelector<HTMLInputElement>('#greet')!.value;

类似地，你可以使用querySelectorAll来选择多个元素，并使用泛型，这样TS就可以理解所有选择的元素都是特定类型的:

const inputs = document.querySelectorAll<HTMLInputElement>('.my-input');

这将产生一个NodeListOf<HTMLInputElement>。

2021-01-09 19:03:33

同样对于任何人使用属性，如Props或Refs没有你的“DocgetId’s”，那么你可以:

("" as HTMLInputElement).value;

这里的倒引号是你的props值，所以一个例子是这样的:

var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);

2018-01-09 09:26:12

  const handleMyEvent = (event : React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    
    const input = (event.target as HTMLInputElement).value;
    console.log('handleMyEvent input -> ', input)

  }

2022-12-22 22:18:19

问题就在这里:

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属性。只有输入元素才有价值。

对于参考检查HTMLElement和htmllinputelement在MDN。我猜Typescript或多或少和这些是一致的。

2012-10-20 15:17:41

我们可以断言

const inputElement: HTMLInputElement = document.getElementById('greet')

或者用as语法

const inputElement = document.getElementById('greet') as HTMLInputElement

给

const inputValue = inputElement.value // now inferred to be string

2018-09-25 09:50:04

属性“value”在类型为“HTMLElement”的值中不存在

推荐文章

最新文章

标签