[docs] Add some Selection-Controls TypeScript demos

[bh1505]

• I have followed (at least) the PR section of the contributing guide.

Adding Typescript demos for some of the Selection-Controls components as a part of #14897

[mui-pr-bot]

No bundle size changes comparing a494652...6612edc

Generated by 🚫 dangerJS against 6612edc

[oliviertassinari]

Would it work? Do we need any?

Suggested change

	function handleChange(event: React.ChangeEvent<any>) {
	function handleChange(event: React.ChangeEvent<HTMLInputElement>) {

[bh1505]

No it does not work, I kept getting this error:

10-17-178-40:selection-controls brandonherrera$ yarn docs:typescript:check
yarn run v1.15.2
$ tslint -p docs/tsconfig.json

ERROR: /Users/brandonherrera/material-ui/docs/src/pages/demos/selection-controls/RadioButtonsGroup.tsx:39:11 - TypeScript@next compile error: 
Type '(event: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<{}>, value: string) => 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 289 more.
ERROR: /Users/brandonherrera/material-ui/docs/src/pages/demos/selection-controls/RadioButtonsGroup.tsx:59:11 - TypeScript@next compile error: 
Type '(event: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<{}>, value: string) => void'.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I used "any" because it was suggested in #13065.

[eps1lon]

Use the any cast as late as possible. Rather React.ChangeEvent<unknown> and the cast to any when you need to pass event.target.value around.

[bh1505]

@eps1lon Just to clarify, are you suggesting to change from

function handleChange(event: React.ChangeEvent<any>) {
     setValue(event.target.value);
}

to this?

function handleChange(event: React.ChangeEvent<unknown>) {
     setValue((event as any).target.value);
}

[eps1lon]

Almost. With "as late as possible" I meant event.target.value as string (event.target as HTMLInputElement).value.

The problem is that the target type depends on the actual react context. It is a HTMLInputElement in this example but it's technically allowed to attach the handler to other element types.

[oliviertassinari]

it's technically allowed to attach the handler to other element types.

Is that different from the Switch or Checkbox components? What do you mean by attaching the handler to another element type?

[eps1lon]

@bh1505 Much appreciated. Thanks.