Question

我正在玩打字稿，我正在尝试创建一个脚本，在输入框中输入文本时将更新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进行编译时，我得到以下内容＆＃34;错误＆＃34;：

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

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

为什么我会收到此错误？我该如何解决？

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

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

Answer 1

根据Tomasz Nurkiewicz的回答，“问题”是打字稿是类型安全的。 :)所以document.getElementById()返回不包含HTMLElement属性的类型value。但是，子类型HTMLInputElement包含value属性。

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

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

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

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

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

即。不包含类型信息。

Answer 2

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

var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);

Answer 3

如果您正在使用反应，则可以使用as运算符。

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

Answer 4

问题在于：

document.getElementById(elementId).value

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

public Object foo() {
  return 42;
}

foo().signum();

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

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

对于MDN中的参考检查HTMLElement和HTMLInputElement。我认为Typescript或多或少与这些一致。

Answer 5

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

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

我只是尝试了一些方法并找出了这个解决方案，
我不知道原始脚本背后的问题是什么。

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

Answer 6

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

("" as HTMLInputElement).value;

如果反转的引号是你的道具值，那么一个例子就是这样：

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

Answer 7

更新示例：

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

文档：

TypeScript - Basic Types - Type assertions

Answer 8

有一种方法可以在没有类型断言的情况下实现这种类型断言，通过使用 generics 代替，通常使用起来更好、更安全。

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

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

同样，您可以使用 querySelectorAll 选择多个元素并使用泛型，以便 TS 可以理解所有选定的元素都属于特定类型：

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

这将产生一个 NodeListOf<HTMLInputElement>。

Answer 9

对于那些可能仍在为此苦苦挣扎的人，另一种选择是使用 (document.getElementById(elementId) as HTMLInputElement).value = ''。 source。

如果您仍然遇到问题，请尝试将其提取为如下函数：

function myInput() { (document.getElementById(elementId) as HTMLInputElement).value = '' }

Answer 10

如果使用的是角形，则可以使用-

const element = document.getElementById('elemId') as HTMLInputElement;

Answer 11

为我工作：

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

Answer 12

如果您需要在其中分配动态值的动态元素ID，则可以使用以下方法：

//element_id = you dynamic id.
//dynamic_val = you dynamic value.
let _el = document.getElementById(element_id);
_el.value = dynamic_val.toString();

这对我有用。

Answer 13

问题：

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

解决方案：在typeScript中我们需要转换document.getElementById()，在HTMLElement

中返回< HTMLScriptElement >类型

所以我们可以按照 typescript.js

的预期方式解决错误

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

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

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

13 个答案: