Q: typescript onChange event type how can I specify the event type for radio buttons with ReactJs and typescript
I tried this but it doesn't works for radio buttons though it works for input type="text"
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
   ....    
};

<FormControlLabel
 value="radio1"
 control={<Radio />}
 label=" radio1"
 onChange={handleChange}
/>
<FormControlLabel
 value="radio2"
 control={<Radio />}
 label="radio2"
 onChange={handleChange}
/>

Error
Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<{}>, checked: boolean) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<{}>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
      Type '{}' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 329 more.ts(2322)


A: Thanks,
Any way I found the solution.
<HTMLInputElement> is not assignable to radio buttons, so we can do the following to skip the built error,
(event: React.ChangeEvent<Record<string, unknown>>) {
console.log(event.target.value);
}

The above code should be used if we have radio button groups.
Otherwise, for a single radio button, this should be used
(event: React.ChangeEvent<unknown>, checked: boolean) {
  console.log(checked);
}



A: (event: React.SyntheticEvent<HTMLInputElement>) => {
    // use event.currentTarget.value here
}

