问如何键入一个父组件的子组件，该组件的道具已动态添加到？

EN

import * as React from 'react'

const ParentComponent = (props: { children: React.Element<typeof ChildComponent> }) => {
     return (React.cloneElement(props.children, { extraProps: 'hello' }));
     // return (React.cloneElement(props.children, { extraProps: 1 }));  // <-- this will error
}

type PropTypes = {
     extraProps?: string, // not great because you'll still have to check presence, but at least it provides
                          // type checking on extraProps in the ParentComponent
};

const ChildComponent = (props: PropTypes) => {
  return <p>{props.extraProps}</p>
}

<ParentComponent><ChildComponent /></ParentComponent>

import * as React from 'react';

type Props = {
  x: string,
  y: string,
}

function injectY<Config: {}>(
  Component: React.AbstractComponent<Config>
): React.AbstractComponent<$Diff<Config, { y: string | void }>> {
  return function WrapperComponent(
    props: $Diff<Config, { y: string | void }>
  ) {
    return <Component {...props} y="injected" />;
  }
}

function Child({ x, y }: Props) {
  return x + y;
}

const EnhancedChild = injectY(Child);

function App() {
  return (
    <div>
      <Child x="explicit" y="explicit" />
      <EnhancedChild x="explicit" />
    </div>
  );
}