Problem
When using TypeScript's explicit optional property pattern (prop?: Type | undefined), react-docgen displays the type as union instead of showing the actual type.
This pattern is common in codebases using exactOptionalPropertyTypes: true in tsconfig, which requires explicit | undefined for optional properties.
Example
interface ButtonProps {
onClick?: ((event: MouseEvent) => void) | undefined
variant?: 'primary' | 'secondary' | undefined
icon?: ReactNode | undefined
}
In Storybook's props table (using react-docgen), these all display as "union" instead of:
(event: MouseEvent) => void
'primary' | 'secondary'
ReactNode
Requested Feature
Add a parser option similar to react-docgen-typescript's shouldRemoveUndefinedFromOptional:
{
shouldRemoveUndefinedFromOptional: true
}
When enabled, this would:
- Detect optional properties (those ending with
?)
- Strip
| undefined from their type representation
- Display the actual meaningful type instead of "union"
Prior Art
react-docgen-typescript has this feature via the shouldRemoveUndefinedFromOptional option:
https://github.com/styleguidist/react-docgen-typescript#parseroptions
Workaround
Currently, Storybook users must manually specify table.type.summary for every affected prop:
argTypes: {
onClick: {
table: { type: { summary: '(event: MouseEvent) => void' } }
}
}
This is tedious and error-prone for large component libraries.
Environment
- react-docgen: latest
- TypeScript: 7.x with
exactOptionalPropertyTypes: true
- Storybook: 10.x using
reactDocgen: 'react-docgen'
Problem
When using TypeScript's explicit optional property pattern (
prop?: Type | undefined), react-docgen displays the type asunioninstead of showing the actual type.This pattern is common in codebases using
exactOptionalPropertyTypes: truein tsconfig, which requires explicit| undefinedfor optional properties.Example
In Storybook's props table (using react-docgen), these all display as "union" instead of:
(event: MouseEvent) => void'primary' | 'secondary'ReactNodeRequested Feature
Add a parser option similar to
react-docgen-typescript'sshouldRemoveUndefinedFromOptional:When enabled, this would:
?)| undefinedfrom their type representationPrior Art
react-docgen-typescripthas this feature via theshouldRemoveUndefinedFromOptionaloption:https://github.com/styleguidist/react-docgen-typescript#parseroptions
Workaround
Currently, Storybook users must manually specify
table.type.summaryfor every affected prop:This is tedious and error-prone for large component libraries.
Environment
exactOptionalPropertyTypes: truereactDocgen: 'react-docgen'