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

【问题标题】：How to use document.getElementById() method in TypeScript?如何在 TypeScript 中使用 document.getElementById() 方法？
【发布时间】：2019-02-28 16:52:31
【问题描述】：

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

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

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

我该如何解决这个问题？

【问题讨论】：

另外，如果没有找到myForm，那么它确实可能是个问题。 TS 不知道你的页面布局。
如果你确定元素存在，你可以使用!:document.getElementById('myForm')!.reset()来解决默认类型。
我将它与 AngularJs 一起使用，它是我可以找到 myForm 的控制器，但问题是它给我一个错误，说 document.getElementById('myForm') 在编译之前可能为 null .
@RaphaelSchweikert document.getElementById('myForm')! 这会起作用，但稍后如果我添加.reset() 它会显示[ts] Property 'reset' does not exist on type 'HTMLElement'. any。

标签： javascript angularjs typescript dom

【解决方案1】：

如果您使用 strictNullChecks 选项（或包含 strictNullChecks 的 strict），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()

【讨论】：

ts > 3.4.5 禁止非空断言，只使用断言（第一个）。
@Takatalvi 为什么他们被禁止？这对我来说是个新闻，你能提供一些文档吗？也许你有一个禁止它们的 lint 规则，但它们仍然是语言中完全受支持的部分
palantir.github.io/tslint/rules/no-non-null-assertion
@Takatalvi 一个 tslint 规则只是一个 lint 规则。一个人可以选择加入或不加入。有很多代码库不选择禁止该运算符，TS 编译器团队就是其中之一。还有一个 TS lint 规则强制你指定我个人认为是一个可怕的想法的所有类型。盲目地选择每条规则并不是一个好主意。
感谢您的澄清。我误解了警告。

【解决方案2】：

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

"strictNullChecks": false

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

如果您绝对确定该元素存在，您还可以使用! 告诉 typescript 您的 id 将永远存在

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

或者如果你想确保永远不会因为元素确实不存在而出错，请检查它的存在

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

【讨论】：

document.getElementById('myForm')! 这将传递空错误但稍后如果我添加.reset() 然后它会显示[ts] Property 'reset' does not exist on type 'HTMLElement'. any

【解决方案3】：

尝试使用这样的类型：

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

【讨论】：

【解决方案4】：

尝试检查元素。比如：

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

【讨论】：

【解决方案5】：

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

【讨论】：

document.getElementById('myForm')！