how do you pass a generic type to an anonymous function in typescript tsx file

Question

The following function is failing in a .tsx file:

export const withComponent = <T>(Component: React.ComponentType<T>) => (props: any) => (
  <shortcutContext.Consumer>
    {addShortcut => <Component addShortcut={addShortcut} {...props} />}
  </shortcutContext.Consumer>
);

With the error JSX element 'T' has no corresponding closing tag.

Answer 1

Looks like a limitation of .tsx parser, there is no way to make it interpret this particular < as a delimiter for generic parameter instead of start tag.

But for this particular case, the workaround is easy.

export const implies this is at the top level, and its implementation does not refer to this anyway, so it could be rewritten using an old-style function instead of the first =>:

export const withComponent = function<T>(Component: React.ComponentType<T>) { 
    return (props: any) => (
        <shortcutContext.Consumer>
            {addShortcut => <Component addShortcut={addShortcut} {...props} />}
        </shortcutContext.Consumer>
    )
};

Answer 2

you could write this way as well:

export const withComponent = <T,>(Component: React.ComponentType<T>) => (props: any) => (
  <shortcutContext.Consumer>
    {addShortcut => <Component addShortcut={addShortcut} {...props} />}
  </shortcutContext.Consumer>
);