TypeScript 如何避免类型错误：属性 ‘innerHTML’ 在类型 ‘Element’ 上不存在

在本文中，我们将介绍如何在使用 TypeScript 开发时避免类型错误，特别是针对属性 ‘innerHTML’ 在类型 ‘Element’ 上不存在的问题。

1. 问题描述

当我们使用 TypeScript 开发时，经常会遇到以下类型错误：

Property 'innerHTML' does not exist on type 'Element'.

这个错误表示在我们的代码中尝试访问元素的 innerHTML 属性时，TypeScript 编译器发现这个属性在类型 ‘Element’ 上不存在。因为 ‘Element’ 是一个包含最基本 DOM 元素的类型，它并没有具体定义 innerHTML 属性。

2. 解决方法

为了解决这个问题，我们需要告诉 TypeScript 编译器元素的具体类型，以便它知道 innerHTML 属性是存在的。

我们可以使用特定的类型来替代 ‘Element’ 类型，比如 ‘HTMLElement’ 或者更具体的具体元素类型，比如 ‘HTMLDivElement’。这些类型都包含了 innerHTML 属性的定义，所以 TypeScript 将不会报错。

例如，如果我们知道某个元素是一个 div 元素，我们可以将其类型声明为 ‘HTMLDivElement’，代码如下：

const myDiv: HTMLDivElement = document.getElementById("myDiv");
console.log(myDiv.innerHTML);

在这个示例中，我们使用 document.getElementById 方法获取到一个 id 为 “myDiv” 的元素，并将其类型声明为 ‘HTMLDivElement’。这样 TypeScript 编译器将知道这个元素具有 innerHTML 属性，并且不会报错。

3. 更普遍的解决方法

上述方法可以解决特定元素的类型错误问题，但是如果我们遇到了多个元素或者无法确定具体类型的情况，该怎么办呢？

在这种情况下，我们可以使用类型断言（Type Assertion）来告诉编译器我们知道元素的具体类型。通过类型断言，我们可以暂时绕开 TypeScript 的类型检查，但是请谨慎使用类型断言，确保我们在运行时不会引起错误。

在下面的示例中，我们使用了类型断言来告诉编译器我们知道 <div> 元素具有 innerHTML 属性：

const myElements: Array<Element> = document.querySelectorAll(".myElements");

for (const element of myElements) {
  if (element instanceof HTMLDivElement) {
    console.log((element as HTMLDivElement).innerHTML);
  }
}

在这个示例中，我们使用 querySelectorAll 方法获取了 class 为 “myElements” 的所有元素，并将其类型声明为 ‘Array‘。在遍历这些元素时，我们使用了类型断言 (element as HTMLDivElement) 告诉编译器这些元素都是 <div> 元素，因此可以安全地访问 innerHTML 属性。