Adding window.event handler to typescript

Question

Normally when I wanted to catch an event on a page in js:

window.onkeydown = function (event) {
    //Do something here
}

I cannot seem to figure out (or Google) how to do this in typescript. For the setup I am working in, there is a ts file for the page, and a ts file for the class that it is loading.

If there is something that accomplishes the above, for typescript, then it is an alternative — TopBanana9000, Jul 29 '16 at 13:54
Can you explain a bit more about the environment? Are you compiling the code to run on a browser or interpreting somewhere? — Ismael Miguel, Jul 29 '16 at 13:55
I need this to be inside of a typescript file. I do not know how to write event handlers in typescript for a page. The event handler needs access to variables and functions within a typescript class — TopBanana9000, Jul 29 '16 at 14:01
@MikeViscontini what's the compile error you get for the code above or problem you're having though? Can you show an example that doesn't work? This code should compile as AlexG said (though using addEventListener is better). — David Sherret, Jul 29 '16 at 14:44

Bruno Grieder · Accepted Answer · 2016-07-29T14:08:38.157

24

This

window.addEventListener('keydown', keyDownListener, false)

window is defined will all events in lib.d.ts and this particular listener as

 addEventListener(type: "keydown", listener: (ev: KeyboardEvent) => any, useCapture?: boolean): void;

or this, if you want to keep your original "style",

window.onkeydown = (ev: KeyboardEvent): any => {
     //do something
}

edited Jul 29 '16 at 14:08

answered Jul 29 '16 at 14:03

Bruno Grieder

28,128
8
69
101

1

There is no need for this if your project is setup correctly. lib.d.ts defines window with an onkeydown property. – AlexG Jul 29 '16 at 14:06

score 3 · Answer 2 · answered Oct 22 '19 at 15:21

3

To answer more clearly:

const controlDown = (event: KeyboardEvent) => {
    console.log(event);
};
window.addEventListener('keydown', controlDown);

answered Oct 22 '19 at 15:21

manu

1,059
1
16
33

6

Get `Type '(event: React.KeyboardEvent) => void' is not assignable to type 'EventListener'.` – Tunn Feb 13 '20 at 00:18
28

In case of using this with React make sure you don't accidentally use `import { KeyboardEvent } from "react";`. This leads to the `not assignable to type 'EventListener'` exception. Instead the KeyboardEvent from globalThis must be used (i.e. simply remove the import statement) – luk Aug 14 '20 at 09:57

score 2 · Answer 3 · answered Aug 16 '22 at 16:08

2

windows.addEventListener('keydown', (event: KeyboardEvent) =>{
 // if you need event.code
});

windows.addEventListener('keydown', (event: Event) =>{
 // event
});

answered Aug 16 '22 at 16:08

Ángela Franco

21
1

Adding window.event handler to typescript

3 Answers3

Linked