如何避免打字稿错误：“元素”类型上不存在属性“innerHTML”答案

【问题标题】：How to avoid typescript error: Property 'innerHTML' does not exist on type 'Element'如何避免打字稿错误：“元素”类型上不存在属性“innerHTML”
【发布时间】：2016-05-17 03:00:55
【问题描述】：

我正在尝试在特定的 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>';

令人惊讶的是，当 typescripts 编译时它仍然有效，但我想知道 typescript 是否给我一个错误，在这种情况下继续分配 innerHTML 的正确方法是什么？

【问题讨论】：

标签： typescript

【解决方案1】：

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

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

【讨论】：

如果不是单个元素，可以使用<HTMLCollection>
'as' 的语法是什么样子的？
你拯救了我的一天
@Jordan (document.querySelector('#myDiv') as HTMLElement).innerText =
它不再是最新版本的有效答案

【解决方案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（已合并）

【讨论】：

我昨天做了，但仍然要求输入 :(

【解决方案3】：

我有同样的问题，通过声明它解决了它：

myString = 'hello world';

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

【讨论】：

【解决方案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 中编译没有错误。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

让 myContainer = document.querySelector("#myDiv") as HTMLElement;
让 myContainer = document.querySelector("#myDiv");
让 myContainer : HTMLElement = document.querySelector("#myDiv");

像这样解析你的元素，你应该能够在其中插入任何你想要的东西。

【讨论】：

【解决方案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
  };

【讨论】：