时间戳

首页 > 解决方案 > 从 Typescript 中的 html 对象中提取数据时，如何消除类型错误？

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

问题描述

我想练习一下使用 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打开设置来实现这一点（也许这是我出错的地方？）。任何指导将不胜感激

标签： javascripttypescripttypesinterface

解决方案

当您开始使用选择器时，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是 type HTMLInputElement，您就可以.value毫无问题地访问。

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

与形式相同：

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

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

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

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

推荐阅读