从 Typescript 中的 html 对象中提取数据时，如何消除类型错误？答案

【问题标题】：How do I get rid of type errors when pulling data from html objets in Typescript?从 Typescript 中的 html 对象中提取数据时，如何消除类型错误？
【发布时间】：2020-04-19 15:35:08
【问题描述】：

我想练习一下使用 Typescript，所以我选择了一个小型 vanilla JS 项目并着手将其转换为 Typescript 项目。我基本上将所有代码复制到一个新项目中，而是使用 .ts 扩展名命名我的 JS 文件。我确保我安装了 Typescript 并且我的 VS Code 有 Typescript 编译器。正如我所料，这给了我 .ts 文件中的大量错误列表，因为我的代码中没有任何类型。我一个一个地攻击每个错误，并且能够通过一些谷歌搜索找出问题，但现在我被困在最后一个错误上，我的谷歌搜索似乎没有帮助。

每次我尝试使用括号表示法从 event.target 对象访问一条数据时都会出现错误：

  const borrowForm = document.getElementById("borrowBookForm")

  borrowForm.onsubmit = event => {
    event.preventDefault()
    const bookID = parseInt(event.target[0].value, 10)
    alert(library.borrow(bookID))
    event.target[0].value = ""
  }

event.target[0] 的两个实例都给我以下错误：

Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'EventTarget'.

Property '0' does not exist on type 'EventTarget'.

我尝试通过为 EventTarget 添加接口来解决此问题，但没有成功

然后我尝试通过直接通过 DOM 来访问我想要的数据，如下所示：

  const borrowForm = document.getElementById("borrowBookForm")

  borrowForm.onsubmit = event => {
    event.preventDefault()
    const bookToBorrow = document.getElementById("bookToBorrow").value
    const bookID = parseInt(bookToBorrow, 10)
    alert(library.borrow(bookID))
    bookToBorrow.value = ""
  }

但在这种情况下，.value 给了我这个错误：

Property 'value' does not exist on type 'HTMLElement'.

我尝试通过为 HTMLElement 添加一个如下所示的界面来解决此问题：

export interface IHTMLElement {
  value: string
}

...但这也没有用。

在这两种情况下，我都遇到了死胡同。

值得一提的是，这些都是表面错误，我的程序在运行时按预期执行，但本练习的目的是通过删除它在我的 JS 代码中发现的所有错误来了解更多关于 Typescript 的工作原理。我还想通过打开"noImplicitAny": true 设置来实现这一点（也许这是我出错的地方？）。任何指导将不胜感激

【问题讨论】：

标签： javascript typescript types interface

【解决方案1】：

当您开始使用选择器时，TypeScript 编译器不知道返回类型，因此您有时必须强制转换它。下面是一个示例，说明如何让 TypeScript 编译器平静下来

const element = document.getElementById('something');
const elementValue = (element as HTMLInputElement).value;

或

const element = document.getElementById('something') as HTMLInputElement;
const elementValue = element.value;

解释：

document.getElementById 返回一个Element。 Element.value 不存在，所以会出现 TypeScript 错误。

因此，通过告诉 TypeScript 从您的 document.getElementById 返回的元素是 HTMLInputElement 类型，您就可以毫无问题地访问 .value。

Event.target 也是如此，它返回一个 EventTarget，因此您必须将其转换为您想要使用的元素类型

与表单相同：

const form = document.getElementById('myform') as HTMLFormElement;
form.onsubmit = e => console.log(e);

我不建议像使用IHTMLElement 接口那样创建包装器接口来处理您的问题。就投吧。您将遇到的下一件事是缺少方法/属性，最终您将得到与已经存在的类重复的类。

或者，另一个不会建议，在您的tslint.json 中禁用any 规则

https://palantir.github.io/tslint/rules/no-any/

【讨论】：