Support for Union types

[stephtr]

As far as I have noticed react-docgen-typescript doesn't support union types like:

interface I1 {
  /** property 1 */
  a: string;
}
interface I2 {
  /** property 2 */
  b: string;
}
export default class Sample extends React.Component<I1 | I2, {}> {
...

At the moment when supplying styleguidist with this construct it just shows children as sole property.

[Havret]

Hi @stephtr

Actually this is how union types work. I believe what you are looking for is intersection types support.

interface I1 {
  /** property 1 */
  a: string;
}
interface I2 {
  /** property 2 */
  b: string;
}
export default class Sample extends React.Component<I1 & I2, {}> {
...

Issue should be closed.

[stephtr]

Thanks for the comment, however I would like to use union, not intersection types.
A more detailed example would be:

interface I1 {
  /** property 1 */
  a1: string;
  a2: string;
}
interface I2 {
  /** property 2 */
  b: string;
}
export default class Sample extends React.Component<I1 | I2, {}> {
…

In that case I would like to set props = {a1: 'abc', a2: 'def'} or {b: 'abc'}, but not {a1: 'abc', a2: 'def', b: 'ghi'}, which would be required by using I1 & I2.

[stephtr]

Therefore one can use Type Guards like:

function isI1(obj: I1 | I2): obj is I1 {
  return (obj as I1).a1 !== undefined;
}

export default class Sample extends React.Component<I1 | I2, {}> {
  public render() {
    if(isI1(props)) {
      // access `props.a1` and `props.a2`
    } else {
      // access `props.b`
    }
    ...
  }
}

[Havret]

Yep, I see it now. The question remains, how should we support scenario when our component is expected to consume set of prom coming either from I1 or I2? Some design will be necessary.

[stephtr]

A first step would be to show them as optional properties (which is better than not showing it at all).

Even though it would be nice to display them as separated property groups, it is questionable if it's worth the effort.

[green-arrow]

I know this hasn't gotten any attention for quite a while, but I just ran into this as well. My example is a button component that can also be rendered as an anchor tag with a hyperlink.

type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

type BaseButtonProps = {
  id: string;
  size?: ButtonSize;
  buttonType?: ButtonType;
  loadingText?: string;
  children: React.ReactNode;
};

type ButtonProps = {
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => any;
  blurOnClick?: boolean;
} & BaseButtonProps & HTMLButtonProps;

type LinkProps = {
  link: string;
  openNewTab?: boolean;
} & BaseButtonProps & HTMLAnchorProps;

type Props = ButtonProps | LinkProps;

Currently, I only see the following props:

I would love to see support for this, and would be happy to help out in any way I can (although I have no familiarity with the react-docgen-typescript codebase).