Как избежать ошибки typescript: свойство 'innerHTML' не существует в типе 'Элемент'

Я пытаюсь поместить некоторый HTML внутри определенного div. Когда я пытаюсь это сделать в typescript, я получаю эту ошибку: 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>';

Удивительно, но он все еще работает, когда скомпилируются скрипты, но мне интересно, если typescript дает мне ошибку, какой правильный способ продолжить назначение innerHTML в этом случае?

Ответ 1

Используйте утверждение типа, чтобы успокоить компилятор:

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

Ответ 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

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

Ответ 5

Единственный безопасный для типов способ изменения элементов 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.