TypeScript: JSX element type does not have any construct or call signatures
Putting an answer here because it is relevant to the error in general.
I was missing new
inside the type definition.
some-js-component.d.ts
file:
import * as React from "react";
export default class SomeJSXComponent extends React.Component<any, any> {
new (props: any, context?: any)
}
and inside the tsx
file where I was trying to import the untyped component:
import SomeJSXComponent from 'some-js-component'
...inside render()
return (
<React.Fragment>
<SomeJSXComponent withProps={asdf} />
</React.Fragment>
);
You need to tell the compiler that the parameter is a constructor function and that returns a React component with the properties language
and pathname
function withMoreInfo<T extends React.Component<{ language: string, pathname: string }, any>>(Wrapped: new (props: { language: string, pathname: string }, context?: any) => T) {
return class WithMoreInfo extends React.Component<{ asPath: string }> {
static async getInitialProps({ asPath }: { asPath: string }) {
return { asPath }
}
render() {
const { asPath } = this.props
const language = asPath.indexOf('/ro') === 0 ? 'ro' : 'en'
return <Wrapped language={language} pathname={asPath} />
}
}
}
// The component must have properties language and pathname and only those
class Home extends React.Component<{ language: string, pathname: string }> {
render() {
return <div />
}
}
export default withMoreInfo(Home)
In your original version when you invoke withMoreInfo(Home)
, T
would have indeed been a react component, however you could have just as well invoked withMoreInfo(1)
since T
was in no way constrained. The generic function must be correct for any type that is passed to it, so the compiler considered T
as being possibly anything and so it could reliably say nothing about it.
The solution is to let the compiler know, that the Wrapped
parameter is a constructor of a react component, namely any react component T
that has as properties { language: string, pathname: string }
. A constructor function has a similar signature declaration to a regular function, just with the new
keyword, hence new (props: { language: string, pathname: string }, context?: any) => T