React TypeScript: window onClick type

Question

What is the correct type for window.onClick, my linter is not happy with any

import React, { useContext, useState } from 'react';
import { Link } from 'react-router-dom';
import { Global } from '../globalState';
import { Dispatch, LOGGED_IN, SET_MODAL } from '../globalState';

interface PropsInterface {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...
window.onclick = (event: any) => {
//                        ^
//                        What is the correct type ??       
    if (
      event.target.id !== 'dropdown'
    ) {
      setState((prev) => ({
        ...prev,
        dropDownStatus: false,
      }));
    }
  };

sunknudsen · Accepted Answer · 2020-03-25 20:12:59Z

1

For synthetic elements, you can use React.MouseEvent.

answered Mar 25, 2020 at 20:12

sunknudsen

7,5107 gold badges51 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

This is defined in the default DOM type definition.

In the most recent version you can find this definition at line 5903 of the lib.dom.d.ts:

...

/**
 * Fires when the user clicks the left mouse button on the object
 * @param ev The mouse event.
 */
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;

...

So the correct type would be MouseEvent:

window.onclick = (event: MouseEvent) => { }

If you really want to map the id of the target, you can do something like:

window.onclick = (event: MouseEvent & { target: {id: string}}) => { }

TL;DR

This part doesn't answer the question, but helps to address further trouble.

You want that the dropdown closes, if anything but the dropdown was clicked, right? I think you are better of with adding a reference to the dropdown and compare this instead of the id:

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 15, 2019 at 15:00

Robin

8,5909 gold badges66 silver badges108 bronze badges

2 Comments

Bill Over a year ago

I get a new error Property 'id' does not exist on type 'EventTarget'.ts(2339) on event.target.id

Robin Over a year ago

@Bill: Please open another question, if you have troubles implementing off click handling, as this question is about something else.

Collectives™ on Stack Overflow

React TypeScript: window onClick type

2 Answers 2

Comments

TL;DR

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

TL;DR

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related