如何避免打字稿错误:属性'innerHTML'在'Element'类型上不存在

Question

我正在尝试将一些HTML放在特定的div中.当我在打字稿中尝试这个时,我得到了这个错误: Property 'innerHTML' does not exist on type 'Element'.基本上,这是代码:

document.body.innerHTML = '<div id="myDiv"><div>'

let myContainer = document.querySelector("#myDiv");
myContainer.innerHTML = '<h1>Test</h1>';

令人惊讶的是,它仍然适用于打字稿编译,但我想知道打字稿是否给我一个错误,在这种情况下,分配innerHTML的正确方法是什么？

Answer 1

使用类型断言来安抚编译器:

let myContainer = <HTMLElement> document.querySelector("#myDiv");
myContainer.innerHTML = '<h1>Test</h1>';

Answer 2

在TypeScript的未来版本中,不需要进行转换.我发送了拉取请求来解决问题:

• error: Property 'innnerHTML' does not exist on type 'Element'(https://github.com/Microsoft/TypeScript/issues/5754)
• https://github.com/Microsoft/TSJS-lib-generator/pull/35

Answer 3

我遇到了同样的问题，通过将其声明为：

myString = 'hello world';

var el: HTMLElement = document.getElementById('id_of_element');
el.innerHTML = myString;

Answer 4

修改 DOM 元素的唯一类型安全方法是首先验证它们是否存在。TypeScript 足够聪明，可以告诉您当在文档中找不到目标时document.querySelector可以返回。null

document.body.innerHTML = '<div id="myDiv"><div>'

let myContainer: HTMLDivElement | null = document.querySelector("#myDiv");

if (myContainer instanceof HTMLDivElement) {
    myContainer.innerHTML = '<h1>Test</h1>';
}

上面的代码在 TypeScript 3.2.1 中编译没有错误。