TypeScript error using Function as React prop?

Question

I'm making a checkbox React TypeScript component. I need to accept an onChange function, but all that I know is that it will be a function.

I thought I could use the generic function type:

type Props = {
  onChange: Function;
};

However when I try and use it I get an error:

// From Material UI
<CheckboxComponent onChange={onChange}>

Type 'Function' is not assignable to type '(event: ChangeEvent, checked: boolean) => void'.

see https://stackoverflow.com/questions/40676343/typescript-input-onchange-event-target-value — Isidrok, Jun 19 '20 at 09:10
Have you considered using the more specific type? Not all `Function`s are `(event: ChangeEvent, checked: boolean) => void`. — jonrsharpe, Jun 19 '20 at 09:14

score 0 · Accepted Answer · answered Jun 19 '20 at 09:09

0

Just copy and paste the type from the error into the props type:

type Props = {
  onChange: (event: ChangeEvent, checked: boolean) => void;
};

Then adjust your function to that type.

answered Jun 19 '20 at 09:09

Rostyslav

1

there is already a type for that https://stackoverflow.com/questions/40676343/typescript-input-onchange-event-target-value – Isidrok Jun 19 '20 at 09:10

1 Answers1