如何在TypeScript中使用document.getElementById（）方法？

Question

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

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

但是我可以在打字稿中使用它，这给我一个错误，提示document.getElementById('myForm') may be null

我该如何解决这个问题？

Answer 1

如果使用strictNullChecks选项（或包含strict的{​​{1}}），Typescript将强制您检查该值是否不为null。您可以执行测试，也可以使用非null断言（！）。另外，您将需要使用类型断言来断言html元素是strictNullChecks，因为默认情况下它只是HTMLFormElement，而HtmlElement仅存在reset

只是一个断言断言：

HTMLFormElement

带有检查的断言（推荐）：

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

不是空断言（如果您只想访问let form = document.getElementById('myForm') if(form) (form as HTMLFormElement).reset(); 成员）：

HtmlElement

Answer 2

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

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

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

如果您完全确定该元素存在，则也可以使用"strictNullChecks": false 告诉打字稿您的ID将一直存在

!

或者，如果您想确保由于该元素确实不存在而永远不会出错，请检查其存在性

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

Answer 3

尝试检查该元素。像这样：

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

Answer 4

只需使用此语法即可 document.getElementById('myForm')！