与其使用类型断言、类型保护或any解决该问题,更优雅的解决方案是使用泛型来指示您选择的元素的类型。
不幸的是,getElementsByName不是通用的,而是querySelector和querySelectorAll是。(querySelector并且querySelectorAll也更加灵活,因此在大多数情况下可能更可取。)
如果您将标签名称单独传递给querySelectoror 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.