HTML元素的类型转换

我正在尝试使用

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'

因此，我可以将我的

按钮。ok

交给HTMLButtoneElement：

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

---

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

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

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

let mybutton=document.querySelector（'button.ok'）；

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

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

let mybutton=document.querySelector（'button.ok'）；

您可以使用它来帮助编译器确定变量的类型

let mybutton:Element=document.querySelector（'button.ok'）；
mybutton.addEventListener（'单击'，（）=>{
如果（isButton（mybutton））{
mybutton.disabled；
}
})
函数isButton（元素：any）：元素是HtmlButtoneElement{
返回（元素）。已禁用！==未定义；
} 

---

您可以看到一个工作示例。

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

let mybutton:Element=document.querySelector（'button.ok'）；
mybutton.addEventListener（'单击'，（）=>{
如果（isButton（mybutton））{
mybutton.disabled；
}
})
函数isButton（元素：any）：元素是HtmlButtoneElement{
返回（元素）。已禁用！==未定义；
} 

---

您可以看到一个工作示例。

这是一个很好的方法！虽然您提供的特定代码不是不正确吗？例如，它将匹配具有禁用属性的as。或者我被搞混了？事实上，如果您感兴趣的唯一属性是禁用的属性，那么您可以与您感兴趣的属性建立一个接口，并进行测试。：）我也可以举一个例子，尽管基本上是一样的。这是一个很好的方法！虽然您提供的特定代码不是不正确吗？例如，它将匹配具有禁用属性的as。或者我被搞混了？事实上，如果您感兴趣的唯一属性是禁用的属性，那么您可以与您感兴趣的属性建立一个接口，并进行测试。：）我也可以举一个例子，尽管基本上是一样的。