Material-ui: [TypeScript] Error: TransitionComponent type not assignable to 'ForwardRefExoticComponent'

[wpmoon]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Passing a forwardRef transition component to a TransitionComponent prop in Dialog component throws type error:

Type 'ForwardRefExoticComponent<RefAttributes<{}>>' is not assignable to type 'ComponentType<TransitionProps>'. Type 'ForwardRefExoticComponent<RefAttributes<{}>>' is not assignable to type 'FunctionComponent<TransitionProps>'. Types of property 'defaultProps' are incompatible. Type 'Partial<RefAttributes<{}>>' has no properties in common with type 'Partial<TransitionProps>'.

Expected Behavior 🤔

TransitionComponent should have type support for ForwardRefExoticComponent

Steps to Reproduce 🕹

link to codesandbox

function demo() {
  const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
  });

  return (
      <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Slide in alert dialog
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-labelledby="alert-dialog-slide-title"
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogTitle id="alert-dialog-slide-title">
          {"Use Google's location service?"}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-slide-description">
            Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={handleClose} color="primary">
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
    );
}

Context 🔦

Migrating from JavaScript code to TypeScript. Currently using normal function component to bypass this error - this results in working app with expected warning Did you accidentally use a plain function component for an element instead? that I'm ignoring for now.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.3 |
| React | 16.9.0 |
| Browser | Firefox Developer edition 70.0b8 (64-bit) |
| TypeScript | 3.6.3 |

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[wpmoon]

I just noticed that I can toggle between JavaScript and TypeScript code in the Material UI demo pages.

It seems that I have to assign a type <unknown, TransitionProps> to forwardRef containing the Transition component.

import { TransitionProps } from '@material-ui/core/transitions';

const Transition = React.forwardRef<unknown, TransitionProps>((props, ref) => <Slide direction="up" ref={ref} {...props} />);

...

App runs without any errors. This issue can be kept closed.

[mustafaKamal-fe]

I just noticed that I can toggle between JavaScript and TypeScript code in the Material UI demo pages.

It seems that I have to assign a type <unknown, TransitionProps> to forwardRef containing the Transition component.

import { TransitionProps } from '@material-ui/core/transitions';

const Transition = React.forwardRef<unknown, TransitionProps>((props, ref) => <Slide direction="up" ref={ref} {...props} />);

...

App runs without any errors. This issue can be kept closed.

Please note that i used SlidePropsinstead of TransitionProps. This is how i got rid of these beautiful errors ❤