如何在 Typescript 中设置使用"this"参数的复选框处理程序？

Question

在HTML中，我可以写：

<input type="checkbox" id="MyBox" onchange="MyHandler(this.checked)">

我不想在HTML中指定处理程序，而是想将其设置为TypeScript。我试过了：

document.getElementById('MyBox').onchange = function(){MyHandler(this.checked); };

但是得到错误"；类型"GlobalEventHandlers"上不存在属性"checked"；。然后如何访问"；这个"；？

Answer 1

简单的方法：键入断言

document.getElementById('MyBox')!.onchange = 
function(){MyHandler((this as HTMLInputElement).checked); };

在这里，我已经委托检查getElementById的结果。使用非null断言运算符!补充错误。

或多或少的类型安全方式：

(document.getElementById('MyBox') as HTMLInputElement)
.addEventListener('change', function() { MyHandler(this.checked); })

游乐场连接

您仍然需要键入assertgetElementById的结果，因为typescript无法猜测运行时操作的结果。

生产准备方式：

function assertInput(element: HTMLElement | null): asserts element is HTMLInputElement {
if (!element) throw new Error('Element not found on the page');
if (element.tagName !== 'INPUT') throw new Error(`Element is not an input`)
}
const input = document.getElementById('MyBox')
assertInput(input)
input.addEventListener('change', function () { MyHandler(this.checked) })

游乐场连接