react-docgen-typescript-loader
react-docgen-typescript-loader copied to clipboard
Inline subtype shape inferred as "signature"
trafficstars
hi, running into a small bug with sub types being inferred inline:
type SubType = {
name: string;
};
type Props = {
children?: ReactNode;
/** testing */
name: string;
sub?: SubType;
};
function Component({ name = `` }: Props) {
return <>hey</>;
}
is inferred as:

however exporting SubType from a separate file and importing it works correctly. This is only an issue with type aliases not interfaces.
Same issue here, with following config:
module.exports = {
// ...
webpackFinal: config => {
config.module.rules.push({
test: /\.tsx?$/,
include: path.resolve(__dirname, '../src'),
use: {
loader: require.resolve('react-docgen-typescript-loader'),
options: {
tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
shouldExtractLiteralValuesFromEnum: true,
},
},
})
config.resolve.extensions.push('.ts', '.tsx')
return config
},
}
@strothj I've followed the docs, but each time I use an union type or inline fn declaration I get union or signature as a type, no matter if types are in the same file or not. Here's minimum repro component
import * as React from 'react'
type Compound = 'a' | 'b' | 'c'
type Props = {
first: Compound
second: string
third?: (x: Compound) => Compound
}
export const ReproComponent = ({ first, second, third }: Props) => (
<div>
{first}
{second}
</div>
)
and as a result I see
| name | description | default |
|---|---|---|
| first* | union | - |
| second* | string | - |
| third | signature | - |