RefTypes inside Interface does not expand correctly in Typescript

[sylvesteraswin]

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.

[sylvesteraswin]

@devongovett, since you implemented most of the typescript functionality, could you please take a look at this issue?

[devongovett]

hmm I was of the opinion that interfaces were for more complex types that you might want to document separately (e.g. by linking to the interface definition), whereas type aliases were for things you'd want to inline. I guess that's somewhat subjective though.

[sylvesteraswin]

@devongovett, most of our component props are interfaces, for the most part we can change these to types, but sometimes the data is complex so we have to define those as interfaces.

For example

export interface SizeProps {
  name?: string;
}

export interface SizeTranslationProps {
  fallback: string;
}

export interface SizeCardCommonProps {
  // Translations labels
  labels?: SizeTranslationProps;
}

export interface SizeCardProps
  extends StandardProps<React.HtmlHTMLAttributes<HTMLUListElement>>,
    SizeCardCommonProps {
  // The sizes that need to be displayed
  sizes?: SizeProps[];
}

[sylvesteraswin]

How do you think we can probably refactor this to make sure we don't break existing application, but also make docgen work.

Else, is there a way for docgen to support these types of use cases.

Because from what I see, currently most of the simple use cases are covered, but not complex ones.