TypeScript 不会选择正确的覆盖

Question

我刚刚创建了一个动态组件，应该如下所示：

/* 应该继承所有 InputComponent 属性。 DefaultComponent 应该是默认的组件道具值。 */

<DynamicComponent component={InputComponent} />

我当前的实现如下所示：

type DefaultProps = { defaultProp: string }
type InputProps = { onChange: () => void }
type DynamicType<P> = DynamicProps & { component: ReactType<P> } & P

export default function DynamicComponent(props: DynamicProps & { component?: DefaultComponent } & DefaultComponentProps): ReactElement<DefaultComponentProps>
export default function DynamicComponent<P>(props: DynamicType<P>): ReactElement<P> {
    const { style: overrideStyle, component } = props
    const { style } = getStyle(props)
    const mergedStyle = { ...style, ...overrideStyle }
    return React.createElement(component, { ...props, style: mergedStyle })
};

DynamicComponent.defaultProps = { component: DefaultComponent }

所以我希望接下来会发生：

1.) 当组件未定义时，我期望第一个覆盖（默认覆盖）

<DynamicComponent defaultProps='itsTotallyValid' /> // valid

2.) 定义组件后，我希望继承它的属性

<DynamicComponent component={InputComponent} onChange={() =>{}} /> // valid

由于某种原因，第二种情况永远不会发生，它总是选择第一种。有没有办法更严格，所以我可以强制第二种情况成为可能？

更新

示例：https://codesandbox.io/s/quiet-architecture-zx60y

Answer 1

解决 cmets 中关于默认泛型类型阻塞类型推断的问题，但事实并非如此，下面的最小示例演示了类型推断适用于类型 T 的默认值 string，

function Bar<T = string>(props: { component: T }) : T {
  return props.component
}

Bar({ component : 'string' })
Bar({ component : 5 }) // <-- Type inferred to be number