Order of intersection types leads to non-deterministic results

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?

Commencez par reproduire le problème avec les deux exemples d’intersection TypeScript du rapport et comparez les métadonnées de props générées. Suivez comment la sortie de la documentation détermine si children est requis pour chaque ordre d’intersection. C’est terminé lorsque les deux ordres produisent le même résultat correct concernant le caractère requis.