reactjs / reactjs/react-docgen
RefTypes inside Interface does not expand correctly in Typescript
Open
Nobody has claimed this yet.
typescript
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Description
Original Example (fixtures_23.tsx)
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import React, { Component } from 'react';
type BaseProps = {
/** Optional prop */
foo?: string,
/** Required prop */
bar: number
};
type TransitionDuration = number | { enter?: number, exit?: number } | 'auto';
type Props = BaseProps & {
/** Complex union prop */
baz: TransitionDuration
}
/**
* This is a typescript class component
*/
export default class TSComponent extends Component<Props> {
render() {
return <h1>Hello world</h1>;
}
}
The output for the above example seems to be generated correctly.
Modified example with interfaces
import React, { Component } from "react";
interface BaseProps {
/** Optional prop */
foo?: string;
/** Required prop */
bar: number;
}
type TransitionDuration = number | { enter?: number; exit?: number } | "auto";
interface Props {
something: BaseProps;
/** Complex union prop */
baz: TransitionDuration;
}
/**
* This is a typescript class component
*/
export default class TSComponent extends Component<Props> {
render() {
return <h1>Hello world</h1>;
}
}
Output
{
"description": "This is a typescript class component",
"displayName": "TSComponent",
"methods": [],
"props": {
"something": {
"required": true,
"tsType": {
"name": "BaseProps"
},
"description": ""
},
"baz": {
"required": true,
"tsType": {
"name": "union",
"raw": "number | { enter?: number; exit?: number } | \"auto\"",
"elements": [{
"name": "number"
}, {
"name": "signature",
"type": "object",
"raw": "{ enter?: number; exit?: number }",
"signature": {
"properties": [{
"key": "enter",
"value": {
"name": "number",
"required": false
}
}, {
"key": "exit",
"value": {
"name": "number",
"required": false
}
}]
}
}, {
"name": "literal",
"value": "\"auto\""
}]
},
"description": "Complex union prop"
}
}
}
Issue
props.something in the above output has only the name and not the interface which is defines.
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 with the modified interface example in fixtures_23.tsx and reproduce the generated JSON for TSComponent. Trace how the BaseProps interface is represented for props.something; done means its output includes the interface definition rather than only the name BaseProps, while preserving the existing baz output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100