Reactjs 用于类型脚本类型检查的通用道具

我想写一个组件，它将接收组件和道具，并与注入自定义道具渲染

type InjectProps<P> = {
  custom: string
} & P

interface Props<P> {
  component: React.ComponentType<InjectProps<P>>
  componentProps: P
}

class PropInjector<T> extends Component<Props<T>> {
  ...
  render() {
    const GivenComponent = this.props.component
    return (
      // in my case, Wrapper is needed for some reason.
      <Wrapper>
        <GivenComponent {...this.props.componentProps} custom="props" />
      <Wrapper />
    )
  }
}

我原以为typescript可以推断和检查下面的代码，但它没有抛出任何错误

render() {
  return (
    // should throw error about not existing Input's required props like value, onChange ....
    // But no error
    <PropInjector component={Input} componentProps={{}} />
  )
}

render（）{
返回(
//应该抛出关于不存在输入所需的道具（如value、onChange…）的错误。。。。
//但没有错误
)
}

---

在使用

PropInjector

时，如何制作Typescript来推断

p

，并使用

p

对组件支柱进行一些类型检查？

据我所知，这在Typescript中是不可能的。在最后一个

render（）

方法中，您没有向

PropInjector

提供泛型值。因此，TypeScript不知道

T

应该在

PropInjector

中是什么

解决方法是定义如下所示的中间组件：

class InputPropInjector extends PropInjector<InputProps> { }

class Input extends Component<InputProps> {
    render(): JSX.Element {
        return (
            <InputPropInjector component={Input} componentProps={{}} />
        );
    }
}

类InputPropInjector扩展PropInjector{}
类输入扩展组件{
render（）：JSX.Element{
返回(
);
}
}

---

已经有了一个很好的解决方案，希望将来会有更好的解决方案。

谢谢！如果generic不能与JSX一起使用，那么我必须放弃键入这些组件。但您提到的那个问题已经被设置为TS2.9的里程碑！我将一直等待该版本的发布：D

class InputPropInjector extends PropInjector<InputProps> { }

class Input extends Component<InputProps> {
    render(): JSX.Element {
        return (
            <InputPropInjector component={Input} componentProps={{}} />
        );
    }
}