reactjs / reactjs/react-docgen

RefTypes inside Interface does not expand correctly in Typescript

Open
#366 4 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.