What is proper TypeScript type for Button click event?

1 Answer 2200 Views
Button
Peter
Top achievements
Rank 1
Peter asked on 20 May 2021, 02:25 PM | edited on 20 May 2021, 02:27 PM

In the example here:  https://www.telerik.com/kendo-react-ui/components/buttons/button/

you use the "any" type for the event return.  What is the proper  type to use, and if "any" is really correct, please explain why.  I usually think of "any" as the type to use when I don't understand what the proper type I should be using is. (same with newLogs though I'm not using logs, just seems unusual to see "any" used in library docs)

 


const ButtonContainer = () => {
  const [logs, setLogs] = React.useState([]);

  const handleDomEvent = (event: any) => {
    let newLogs: any = logs.slice();

    newLogs.unshift(event.type);

    setLogs(logs);
  };
  return (
    <>
      <Button
        onClick={handleDomEvent}
        onMouseDown={handleDomEvent}
        onMouseUp={handleDomEvent}
        onFocus={handleDomEvent}
        onBlur={handleDomEvent}
        onKeyPress={handleDomEvent}
      >
        My Button
      </Button>
      <EventLog title="Event Log" logs={logs} />
    </>
  );
};

1 Answer, 1 is accepted

Sort by
0
Krissy
Telerik team
answered on 21 May 2021, 09:38 AM

Hi Peter,

The reason why "any" type was used in that particular example is because there are multiple types of events that are triggering that event handler.
A more specific type definition can indeed be used and I've changed the example from our documentation to include that: 
https://stackblitz.com/edit/react-buttons-events-ts?file=app/main.tsx 

As for the logs, the "Array<string>" type can be used in this case, it is also shown in the example above.

Hope this helps clarify.

Regards,
Krissy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Button
Asked by
Peter
Top achievements
Rank 1
Answers by
Krissy
Telerik team
Share this question
or