Monday, 9 August 2021

React Typescript - Types are incompatible with Thrid Party Library

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