Question

我正在尝试在特定div中放置一些HTML。当我在打字稿中尝试此操作时，我收到此错误：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中正确编译。

Answer 5

Use like this (<HTMLElement>document.querySelector("#myDiv")).innerHTML

Answer 6

让myContainer = document.querySelector（“＃myDiv”）作为HTMLElement;
让myContainer = document.querySelector（“＃myDiv”）;
让myContainer：HTMLElement = document.querySelector（“＃myDiv”）;

像这样解析您的元素，您应该可以在其中插入任何想要的内容。

Answer 7

  const onChange = (e: React.SyntheticEvent ) => {\\e: React.SyntheticEvent - if you use ReactJS
    setActive((e.target as HTMLElement).innerHTML); \\innerHTML works fine instead of getInnerHTML() in TypeScript
  };

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

7 个答案: