I'm encountering an issue with the React.ComponentClass type in my project.
The TypeScript version I'm using is 2.4.2-
Here's the component code:
import * as React from 'react';
import { injectIntl, InjectedIntlProps } from 'react-intl';
interface IBlahProps extends InjectedIntlProps {
}
class BlahBase extends React.Component<IBlahProps> {
}
const Blah = injectIntl(BlahBase);
export default Blah;
Everything seems to be working fine so far.
However, when I try to render this component like this:
render() {
return <Blah />
}
The <Blah /> line is being flagged with the following error message:
[ts] Type '{}' is not assignable to type
'Readonly'. Property 'intl' is missing in type '{}'.
import Blah
I'm puzzled about why this is happening and how I can resolve it without having to use <Blah intl={intl} />.
This is what the index.d.ts for injectIntl looks like:
function injectIntl<P>(component: ComponentConstructor<P & InjectedIntlProps>, options?: InjectIntlConfig):
React.ComponentClass<P> & { WrappedComponent: ComponentConstructor<P & InjectedIntlProps> };
I was able to address this by modifying the interface to a type like this:
type IBlahProps = InjectedIntlProps & {
}
Although, I'm uncertain why extending InjectedIntlProps didn't solve the issue.