React TS：我可以在不进行类型转换的情况下做到这一点吗？ “可以用可能不相关的任意类型实例化”

Question

我有这段代码（这是我真实代码的简化版本，希望我没有删除任何重要的东西）

import React, { ReactElement, ReactNode, createElement } from "react";

interface WithChildren {
  children: ReactNode;
}

type WrapperType<WTProps> = (
  props: WithChildren & WTProps
) => ReactElement | null;

interface SetProps<P> {
  wrap: WrapperType<P>;
  children: ReactNode;
  [x: string]: unknown;
}
export function Set<WProps>(props: SetProps<WProps>) {
  const { wrap, children, ...rest } = props;

  return createElement(wrap, { ...rest, children });
}

interface WrapperProps {
  children: ReactNode;
  foo: string;
}
const ChildWrapper: React.FC<WrapperProps> = ({ foo, children }) => {
  return (
    <div>
      <h1>ChildWrapper</h1>
      <p>{foo}</p>
      {children}
    </div>
  );
};

export default function App() {
  return (
    <Set wrap={ChildWrapper} foo="bar">
      <h1>Hello CodeSandbox</h1>
    </Set>
  );
}

createElement 行给出了这个错误

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ children: React.ReactNode; }' is not assignable to parameter of type 'Attributes & WithChildren & WProps'.
      Type '{ children: React.ReactNode; }' is not assignable to type 'WProps'.
        'WProps' could be instantiated with an arbitrary type which could be unrelated to '{ children: React.ReactNode; }'

我可以通过这样的类型转换来“修复”它

return createElement(wrap, { ...rest, children } as WProps & WithChildren);

但这消除了类型安全性。

我发现了这个类似的问题ts: 'Props' could be instantiated with an arbitrary type which could be unrelated to another type，他们使用Omit<> 来解决它。但我不知道如何在我的情况下应用它。

有没有什么方法可以在不进行类型转换的情况下做到这一点？

编辑：这是一个代码框，显示错误https://codesandbox.io/s/optimistic-microservice-ck7nf?file=/src/App.tsx

以及错误信息的截图

Answer 1

哦，我改变了很多。至于为什么初始代码会出错，我对此感到有些困惑。 也许Set<WProps>(props: SetProps<WProps>) 中的WProps 无法从实例中获取正确的初始类型。

我的解决方案：

import React, { ReactElement, ReactNode } from 'react';

export function Set<WProps>(
  props: WProps & {
    wrap: (props: WProps) => ReactElement;
  }
) {
  const { wrap: Wrap } = props;
  return <Wrap {...props} />;
}

interface WrapperProps {
  children: ReactNode;
  foo: string;
}

const ChildWrapper = ({ foo, children }: WrapperProps) => {
  return (
    <div>
      <h1>ChildWrapper</h1>
      <p>{foo}</p>
      {children}
    </div>
  );
};

export default function App() {
  return (
    <Set<WrapperProps> wrap={ChildWrapper} foo={'1'}>
      <h1>Hello CodeSandbox</h1>
    </Set>
  );
}

我的tsconfig中的strictFunctionTypes属性设置为false（默认值），所以没有复现。