I have a third party library that export a React Component like this:
// Code I can not change
export default class MyIcon extends React.Component {
...
};
MyIcon.propTypes = {
color?: PropTypes.String
}
I'm working on Typescript so I made the definition for this module:
// Code I can change
declare module '@thirdparty/MyIcon' {
import React from 'react';
interface Props {
color?: string
}
const Icon: React.FC<Props>;
export default Icon;
Now, there is a typescript Component that has this structure:
// Code I can not change
interface IButton {
icon?: React.Component,
text: string
}
export default const Button: FC<IButton> = ({ icon, text }) => {...}
Everything works good till I want to use the MyIcon component and pass it through the Button component. The error I get is Type React.FC<Props> is incompatible with Component<{}, {}, {}>
I endup doing this:
<Button icon={myIcon as unknown as Component} />
But what it kills me is not knowing why is failing.
from React Typescript - Types are incompatible with Thrid Party Library
No comments:
Post a Comment