Question

我正在尝试使用document.querySelector函数获取元素。

元素是一个按钮，所以如果我这样做：

let mybutton: Element = document.querySelector(‘button.ok’);
mybutton.addEventListener('click', () => {
    if (mybutton.disabled) 
    // TS linter returns "Property 'disabled' does not exist on Type 'Element'

所以我可以将button.ok提供给HTMLButtonElement：

let mybutton: HTMLButtonElement = document.querySelector('button.ok');
// TS linter returns "Type 'Element' is not assignable to type 'HTMLButtonElement'."

那么如何在TS中管理按钮及其属性？

Answer 1

您希望显式转换对象，而不是尝试通过将其设置为预定义类型的变量来隐式转换它：

let mybutton = <HTMLButtonElement>document.querySelector('button.ok');

Answer 2

您可以做的一件事是使用type guards来帮助编译器确定变量的类型。

let mybutton: Element = document.querySelector('button.ok');
mybutton.addEventListener('click', () => {
    if (isButton(mybutton)) {
        mybutton.disabled;
    }
})

function isButton(element: any): element is HTMLButtonElement {
    return (<HTMLButtonElement>element).disabled !== undefined;
}

您可以看到一个有效的例子here。

输入HTML元素的转换

2 个答案: