Extending an existing prop interface with Omit type results in missing props.

[juanfabrega]

We build a lot of components by extending some basic primitives and as such, most of our component prop interfaces begin by extending the props of those primitive components. For example:

interface ComponentProps extends PrimitiveProps {
  someNewProp: boolean;
}

const Component<ComponentProps> = ({ ...props }) => {
...component code here

this works really well and our prop tables in storybook get filled in with all the props just fine. However, in some cases we want to exclude some props from the primitive type. In these cases we've tried the Omit type.

type PrimitiveWithoutSomeProp = Omit<PrimitiveProps, 'someProp'>;
type ComponentProps = PrimitiveWithoutSomeProp & {
  someNewProp: boolean;
}

const Component<ComponentProps> = ({ ...props }) => {
...component code here

In these cases, all props coming from the primitive will disappear and my props table only shows the single component prop. Anybody else have this issue? Is there perhaps something we're doing wrong? Thanks!

[PengJiyuan]

+1

[bmmpt]

I'm seeing the same thing. Wonder why this is getting no replies...

[ArthurStam]

Have the same issue

[ly-tc]

+1

[courdek]

+1

[Cuzart]

I figured out that when you are using the withCustomConfig function from react-docgen-typescript it also works using Omit or Pick on your PrimitiveProps. You can check the Readme for information on how to use it. I also set these options

withCustomConfig("tsconifg.json, {
savePropValueAsString: true,
shouldExtractLiteralValuesFromEnum: true,
propFilter: ...,
})

[github-actions[bot]]

There was no activity for a long time. The issue will be closed soon.

[github-actions[bot]]

Closing this issue as obsolete.