下面的代码有两个问题。

interface MyForm {
  age: number;
  email: string;
  name: string;
}

function Form<
  T,
  ComponentProps extends {
    name: string;
    onChange: (event: React.ChangeEvent) => void;
  }
>(
  props: {
    component:
      | React.ComponentClass<ComponentProps>
      | React.ComponentType<ComponentProps>;
    name: keyof T;
  } & Omit<ComponentProps, "name" | "onChange">
) {
  const { component: Component, name, ...rest } = props;

  const handleChange = () => {
    //
  };

  return <Component {...(rest as any)} name={name} onChange={handleChange} />;
}

function Component(props: {
  name: string;
  onChange: (event: React.ChangeEvent) => void;
  color: "blue" | "yellow";
}) {
  const { color, name, onChange } = props;
  return <input name={name} onChange={onChange} style={{color}} />;
}

function App() {
  return (
    <>
      {/* in this code, the name is not checked */}
      <Form color="blue" component={Component} name="something" />
      {/* in this code, the name is checked, but I must define all generics */}
      <Form<MyForm, React.ComponentProps<typeof Component>>
        color="yellow"
        component={Component}
        name="name"
      />
      {/* this doesn't work */}
      <Form<MyForm> color="blue" component={Component} name="email" />
    </>
  );
}

首先，我想像<Form<MyForm> color="blue" component={Component} name="email" />这样调用Form组件，而不是定义第二个泛型。在一个复杂的组件中，我有更多的属性和泛型，我不想强迫其他程序员定义所有的泛型，只是因为我希望name必须匹配MyForm中的键。这就是目标。name必须通过TypeScript检查，并且必须是MyForm的keyof，我知道我可以使用可选泛型并定义默认类型，但这违反了逻辑，然后我在调用Form时无法传递color，并且我无法定义颜色是必需的，因为逻辑是，component必须有name和onChange属性，剩下的我不关心，把剩下的传递给组件就行了。
第二，我不能去掉{...(rest as any)}中的any。我不知道，为什么我只使用{...rest}时会得到一个错误。