reactjs / reactjs/react-docgen
Feature: Option to remove `| undefined` from optional prop types
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Description
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
| undefinedfrom 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'
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the TypeScript parser entry point and its parser-option handling; no file or test is named in the issue. Compare the requested option with the linked react-docgen-typescript prior art, then verify that enabled parsing removes | undefined from optional prop types while preserving the meaningful type instead of reporting union.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- documentation, tooling
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100