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

[dmoon11]

• The issue is present in the latest release.
• 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]

👋 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.

[dmoon11]

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 SlideProps instead of TransitionProps. This is how i got rid of these beautiful errors ❤

[ApayRus]

It worked for me like this:

const Transition = React.forwardRef<
	unknown,
	TransitionProps & {
		children?: React.ReactElement
	}
>((props, ref) => {
	return <Slide direction='up' ref={ref} {...props} />
})

I added ? after word children, everything else is exactly from docs. Without question mark there is an error.

[roborew]

When trying @ApayRus solution above I ran into "Component definition is missing display name" as the example does not include the named function from the original code example.

However the solution is correct, keeping the named function call within the forwaredRef hook, but adding the ? mark after children prop.

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & {
    children?: React.ReactElement;
  },
  ref: React.Ref<unknown>
) {
  return <Slide direction="up" ref={ref} {...props} />;
});