我玩周围的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很陌生,所以我可能会遗漏一些明显的东西。:)


当前回答

如果你有动态元素ID,你需要分配动态值,你可以使用这个:

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

这对我很有用。

其他回答

如果你有动态元素ID,你需要分配动态值,你可以使用这个:

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

这对我很有用。

一个快速的修复方法是使用[]来选择属性。

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

我尝试了几种方法,找出了这个解, 我不知道你原来的剧本有什么问题。

你可以参考Tomasz Nurkiewicz的文章。

我们可以 断言

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

或者用as语法

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

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

如果你使用react,你可以使用as操作符。

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

问题:

属性“text”在类型“HTMLElement”上不存在

解决方案:在typeScript中,我们需要强制转换document.getElementById(),它返回< HTMLScriptElement >中的HTMLElement类型

因此,我们可以按照typescript.js所期望的方法来解决错误

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

这对我很管用。希望这对你也有用。