Types and interfaces shows as a name instead of type

[radswiat]

trafficstars

Example code:

export type IPropsVariant = 'primary' | 'secondary' | undefined
export type IPropsType = 'button' | 'submit' | 'reset' | undefined

export interface IProps {
  id?: string;
  type?: IPropsType;
  variant?: IPropsVariant;
  title?: 'string';
  tabIndex?: number;
  disabled?: boolean | undefined;
  className?: string;
}

Output:

Expected: IPropsType to be displayed as 'button' | 'submit' | 'reset' | undefined IPropsVariant to be displayed as 'primary' | 'secondary' | undefined

Am i missing something ?:) Thanks for help!

[clisterdmello]

can you try this option shouldExtractLiteralValuesFromEnum: true Its given in https://github.com/strothj/react-docgen-typescript-loader

[radswiat]

I already solved the problem - kinda :)

What helped in my case was to remove undefined from TS type and then it started pulling up the values.

Thanks for the shout about shouldExtractLiteralValuesFromEnum i'll try it out, thanks!

Would probably be good to understand why undefined is breaking the render of types.

[nekitk]

shouldExtractLiteralValuesFromEnum currently works only with string unions and enums and leaves other unions as is.

To get rid of | undefined in optional props you can pass strict: false to compilerOptions of react-docgen-typescript-loader:

{
	loader: 'react-docgen-typescript-loader',
	options: {
		compilerOptions: {
			...require('./tsconfig.json').compilerOptions,
			strict: false,
		},
		shouldExtractLiteralValuesFromEnum: true,
	},
}

For documentation purposes there's no need to include undefined in output since there's a required column in props table which shows, what props are optional and what are not.

Also there is no need in adding | undefined to already optional props (disabled for example) since prop being optional assumes that it can be undefined.