如何在TypeScript中使用document.getElementById()方法？

Question

我正在尝试重置 HTML 表单，以便使用以下命令清除输入字段中的所有值；

document.getElementById('myForm').reset(); 

但是我可以在打字稿中使用它，它给了我一个错误，说

document.getElementById('myForm') may be null

如何解决这个问题？

Answer 1

如果您使用

strictNullChecks

 选项（或包含 

strict

 的 

strictNullChecks

），

Typescript 将强制您检查该值不为空。您可以执行测试或使用非空断言 (!)。此外，您还需要使用类型断言来断言 html 元素是一个

HTMLFormElement

，因为默认情况下它只是一个

HtmlElement

并且

reset

仅存在

HTMLFormElement

只是一个断言断言：

(document.getElementById('myForm') as HTMLFormElement).reset();

带检查的断言（推荐）：

let form = document.getElementById('myForm')
if(form) (form as HTMLFormElement).reset(); 

非空断言（如果您只想访问

HtmlElement

成员）：

document.getElementById('myForm')!.click()

Answer 2

对此有不同的修复方法。您可以编辑 tsconfig.json 并添加

"strictNullChecks": false

对它。这将禁用严格的空检查。

如果您绝对确定该元素存在，您还可以使用

!

告诉打字稿您的 id 将始终存在

document.getElementById('myForm')!.reset(); 

或者，如果您想确保永远不会因为该元素确实不存在而出现错误，请检查它是否存在

const el = document.getElementById('myForm');
if (el) el.reset();

Answer 3

尝试使用这样的输入：

const myForm = <HTMLElement>document.getElementById('myForm')
if(myForm ) myForm.reset();

Answer 4

只需使用此语法即可工作：

document.getElementById('myForm')!

Answer 5

您可以使用打字稿定义文件和以下内容覆盖全局 TS 类型：

declare global {
  interface Document {
    getElementById<T extends HTMLElement>(id: string): T | null;
  }
}

这应该允许您通过正确的输入执行以下操作：

const form = document.getElementById<HTMLFormElement>('myForm');
if (form) form.reset();

Answer 6

尝试检查该元素。比如：

var myForm = document.getElementById('myForm');
if(myForm) myForm.reset();