React.memo with typescript in react

I am using React.memo() in a .tsx file(React typescript)

Now I have declared an interface for Props as:

interface Props { type?: string; } 

My component looks like:

const Component: React.SFC<Props> = props => { /// return something; }; export default memo(Component); 

Now since type is an optional prop I intend to use it only sometimes.

If I use my component as <Component type="something" /> everything is okay. But if I use it as <Component /> I get the error -->

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & Props'.

This seems to be a very absurd error as I have tried this on Code sandbox and everything works fine. Any ideas about what the error could be?

UPDATE

If I explicitly add a prop in interface like

interface Props { type?: string; children?: ReactNode; } 

then in that case everything works fine. This is supposed to be implicit but acc to the error its taking as

'{ children: string; }'

Any ideas???

1 Answer

I believe there is an error in typings. Changing

function memo<P extends object>( Component: SFC<P>, propsAreEqual?: ( prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>> ) => boolean ): NamedExoticComponent<P>; 

to

function memo<P extends object>( Component: SFC<P>, propsAreEqual?: ( prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>> ) => boolean ): NamedExoticComponent<PropsWithChildren<P>>; 

fixes the issue

UPDATE

Well, actually it is not a bug. See discussion.

TLTR: You have to specify children in component props type.

type MyComponentProps { children: React.ReactNode; } 

Read more