TypeScript 无法在这里实现全面飞跃,因为它只知道事件名称将是一个字符串,因此使用最通用的事件类型。
下面的示例转换为独立运行的示例 - 因此我将“从类中”取出来进行演示......
虽然字符串是keydown
and keyup
你可以保证类型安全,并否决编译器:
let listenTo = (window: Window) => {
['keydown', 'keyup'].forEach(eventName => {
window.addEventListener(eventName, e => {
handleEvent(<any>e);
});
});
}
let handleEvent = (event: KeyboardEvent) => {
const { key } = event;
//...
}
如果将其他字符串添加到事件名称数组中,则这会失败。
由于专门的签名,直接使用字符串时可以实现完整的类型安全:
window.addEventListener('keydown', e => {
handleEvent(e); // e is KeyboardEvent
});
因此,您可以更严格地键入数组以获得正确的类型优点:
type KeyboardEventNames = 'keydown' | 'keyup';
let listenTo = (window: Window) => {
const eventNames: KeyboardEventNames[] = ['keydown', 'keyup'];
eventNames.forEach(eventName => {
window.addEventListener(eventName, e => {
handleEvent(e);
});
});
}
let handleEvent = (event: KeyboardEvent) => {
const { key } = event;
//...
}
在最后一个示例中,我们将数组中的元素类型限制为仅键盘事件名称,因此编译器现在知道它不仅仅处理任何旧字符串,并且可以推断事件类型。