typescript onChange event type

Question

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)

Answer 1

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);
}

Answer 2

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