{"id":1185,"date":"2021-06-07T11:44:11","date_gmt":"2021-06-07T09:44:11","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1185"},"modified":"2021-06-07T11:45:13","modified_gmt":"2021-06-07T09:45:13","slug":"how-to-handle-window-event-with-typescript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/06\/07\/how-to-handle-window-event-with-typescript\/","title":{"rendered":"How to handle window.event  with typescript ?"},"content":{"rendered":"\n<p>Normally when we want to catch an event on a page in js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.onkeydown = function (event) {\n    \/\/Do something here\n}<\/code><\/pre>\n\n\n\n<h4>How to make it in Typescript ?<\/h4>\n\n\n\n<p><code>window<\/code>&nbsp;is defined will all events in&nbsp;<code>lib.d.ts<\/code>&nbsp;and this particular listener as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>addEventListener(type: \"keydown\", listener: (ev: KeyboardEvent) =&gt; any, useCapture?: boolean): void;<\/code><\/pre>\n\n\n\n<p>Also, in Typescript, we can handle it like this: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const controlDown = (event: KeyboardEvent) =&gt; {\n    console.log(event);\n};\nwindow.addEventListener('keydown', controlDown);<\/code><\/pre>\n\n\n\n<p>or this, if we want to keep our original &#8220;style&#8221; :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.onkeydown = (ev: KeyboardEvent): any =&gt; {\n     \/\/do something\n}<\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Be Aware !!<\/span><\/h4>\n\n\n\n<p>Even when TypeScript is playing by JavaScript rules, however, there are limits to what the compiler will allow. Let\u2019s try adjusting&nbsp;<code>onClick<\/code>&nbsp;to expect a number:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const onClick = (n: number) =&gt; { \/* ... *\/ }\n\nwindow.addEventListener('click', onClick);<\/code><\/pre>\n\n\n\n<p>This time, we\u2019ll see the expected compiler error:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Argument of type '(e: number) =&gt; void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.\n\/\/   Type '(e: number) =&gt; void' is not assignable to type 'EventListenerObject'.\n\/\/     Property 'handleEvent' is missing in type '(e: number) =&gt; void'.<\/code><\/pre>\n\n\n\n<p>As one would expect,<span class=\"has-inline-color has-vivid-cyan-blue-color\"> &#8216;click&#8221;<\/span> or &nbsp;<span class=\"has-inline-color has-luminous-vivid-orange-color\">&#8216;<code>keydown\"<\/code><\/span>&nbsp;will spawn a<span class=\"has-inline-color has-vivid-cyan-blue-color\">&nbsp;Mousevent<\/span> or <code><span class=\"has-inline-color has-luminous-vivid-orange-color\">KeyboardEvent<\/span><\/code> &#8211; not a number. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>So the right way to write the function onClick would be : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const onClick = (e: MouseEvent) =&gt;\n  console.log(`(${e.clientX}, ${e.clientY})`);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Normally when we want to catch an event on a page in js: How to make it in Typescript ? window&nbsp;is defined will all events in&nbsp;lib.d.ts&nbsp;and this particular listener as: Also, in Typescript, we can handle it like this: or this, if we want to keep our original &#8220;style&#8221; : Be Aware !! Even when [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,5,83],"tags":[326,87,325],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1185"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1185"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1185\/revisions"}],"predecessor-version":[{"id":1187,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1185\/revisions\/1187"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}