I am writing a Higher Order Component for my React project using Typescript which is basically a function accepts a React component as an argument and return a new component that wraps around it.
Yet as it works as expected, TS is complaining that "Return type of exported function has or is using private name "Anonymous class".
Function in question:
export default function wrapperFunc ( WrappedComponent: typeof React.Component, ) { return class extends React.Component { public render() { return ; } }; }
The error is reasonable as the returning class of wrapper function is not exported and other module imports this function has no way of knowing what the return value would be. But I cannot declare the return class outside of this function as it requires to wrap a component pass to the outer function.
A trial with explicitly specifying return type typeof React.Component
like below do suppress this error.
Function in question with explicit return type:
export default function wrapperFunc ( WrappedComponent: typeof React.Component, ): typeof React.Component { // { public render() { return ; } }; }
However, I am not certain about validity of this approach. Is it considered a right approach for tackling this particular error in TypeScript? (Or am I creating unintended side effects elsewhere? Or any better way of doing such?)
(Edit) Change quoted code as per Daniel's suggestion.