Skip to content

Instantly share code, notes, and snippets.

@sidferreira
Last active July 29, 2020 17:58
Show Gist options
  • Save sidferreira/10e1470f0a3b1c63a1ae8a80425bbc12 to your computer and use it in GitHub Desktop.
Save sidferreira/10e1470f0a3b1c63a1ae8a80425bbc12 to your computer and use it in GitHub Desktop.
Some TS Issues

Hi! I'm trying to create this HOC-like function in a React Native + TS project. Now, although the CompA goes all good, CompB just doesn't work. It just says Type 'FunctionComponent<ICompBProps>' is not assigname to type 'FunctionComponent<IProps>'.

Any suggestion about how to fix this?

interface IProps {
  //...
}

interface ThemedProps extends IProps {
  Icon: React.ComponentType<ICompProps & any>;
}

const Themed = ({ Comp, ...props }: ThemedProps) => {
  const theme = useTheme();

  return <Comp theme={theme} {...props} />;
};

// ---

const CompA:React.Component<ICompProps> = (props: IProps) => (//...);

const ThemedCompA = (props: IProps) => <Themed Comp={CompA} {...props} />

// ---

interface ICompBProps extends IProps {}

const CompB:React.Component<ICompBProps> = (props: ICompBProps) => (//...);

const ThemedCompB = (props: ICompBProps) => <Themed Comp={CompB} {...props} />

So, for now I did a workaround with the & any...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment