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


当前回答

这可能看起来很老套,但这对我来说很管用:

yarn添加-D @types/web

我想我一定是有一个过时的类型定义。

其他回答

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

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

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

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

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

这将产生一个NodeListOf<HTMLInputElement>。

根据Tomasz Nurkiewiczs的回答,“问题”是typescript是类型安全的。所以document.getElementById()返回不包含value属性的HTMLElement类型。子类型HTMLInputElement包含value属性。

因此,一个解决方案是将getElementById()的结果强制转换为HTMLInputElement,如下所示:

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

<>是typescript中的强制转换操作符。请参阅问题TypeScript: casting HTMLElement。

如果您在.tsx文件中,上面的强制转换语法将抛出错误。你会想要使用下面的语法:

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

上面这行代码的结果是这样的:

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

即不包含类型信息。

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

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

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

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

这对我很有用。

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

("" as HTMLInputElement).value;

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

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