reactjs / reactjs/react-docgen

Order of intersection types leads to non-deterministic results

Open
#520 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
5h 7m
Merged PRs (30d)
4

Description

The following:

import React from 'react';

type Props = { children: React.ReactNode; } & { children?: React.ReactNode; }

const Component = ({ children }: Props) => {
  return <div>{children}</div>
}

export default Component;

Gives these results:

{
  "description": "",
  "displayName": "Component",
  "methods": [],
  "props": {
    "children": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
}

As you can see, children are NOT required, however, if I switch the order of the intersection type:

import React from 'react';

type Props = { children?: React.ReactNode; } & { children: React.ReactNode; }

const Component = ({ children }: Props) => {
  return <div>{children}</div>
}

export default Component;

Then the result is different, with children now being required...

{
  "description": "",
  "displayName": "Component",
  "methods": [],
  "props": {
    "children": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
}

Is this expected behaviour?

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 by reproducing the issue with the two TypeScript intersection examples in the report and compare the generated props metadata. Trace how the documentation output determines whether children is required for each intersection order. Done means both orders produce the same correct requiredness result.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.