我正在使用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>

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中效果很好。

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

另外,我可以在哪里查找哪些属性在'HTMLElement'根据TypeScript?

请注意,我是JavaScript和Typescript的新手,因此我可能会缺少明显的东西。:)

答案

基于Tomasz Nurkiewiczs的答案,“问题"是Typescript是类型。:) 所以document.getElementById()返回类型HTMLElement不包含value财产。亚型HTMLInputElement但是,确实包含value财产。

因此,解决方案是投射getElementById()HTMLInputElement像这样:

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

<>是打字稿中的铸造操作员。看到问题打字稿:铸造htmlelement

如果你在.tsx将上述铸造语法提交错误。您需要使用此语法:

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

从上面的行中产生的JavaScript看起来像这样:

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

即没有类型的信息。

来自: stackoverflow.com