与其使用类型断言、类型保护或any
解决该问题,更优雅的解决方案是使用泛型来指示您选择的元素的类型。
不幸的是,getElementsByName
不是通用的,而是querySelector
和querySelectorAll
是。(querySelector
并且querySelectorAll
也更加灵活,因此在大多数情况下可能更可取。)
如果您将标签名称单独传递给querySelector
or querySelectorAll
,由于以下行,它将自动正确输入lib.dom.d.ts
:
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
例如,要选择页面上的第一个脚本标签,就像您的问题一样,您可以执行以下操作:
const script = document.querySelector('script')!;
就是这样——TypeScript 现在可以推断出它script
现在是一个HTMLScriptElement
.
querySelector
当您需要选择单个元素时使用。如果您需要选择多个元素,请使用querySelectorAll
. 例如:
document.querySelectorAll('script')
结果是NodeListOf<HTMLScriptElement>
.
如果您需要更复杂的选择器,您可以传递一个类型参数来指示您要选择的元素的类型。例如:
const ageInput = document.querySelector<HTMLInputElement>('form input[name="age"]')!;
结果ageInput
被键入为HTMLInputElement
.