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

Question

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

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

但我可以在 typescript 中使用它，它给我一个错误，说document.getElementById('myForm') may be null

我该如何解决这个问题？

Answer 1

打字稿将迫使你检查值不为空，如果你使用strictNullChecks选项（或strict ，其中包括strictNullChecks ）。 您可以执行测试或使用非空断言 (!)。 此外，您还需要使用类型断言来断言 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

尝试检查元素。 就像是：

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

Answer 5

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