reactjs - Typescript 类型检查的通用 Prop

Question

我想写一个组件来接收组件和 Prop ，并通过注入(inject)自定义 Prop 进行渲染

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 />
    )
  }
}

当我使用 Input 测试哪些 props 是这样定义的时，

interface InputProps {
  custom: string
  value: string
  onChange(value: string): void
}
class Input extends Component<InputProps> { ... }

我认为 typescript 可以推断和类型检查下面的这段代码，但它没有抛出任何错误。

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

如何让 Typescript 推断 P，并在使用 PropInjector 时使用 P 对 componentProps 进行一些类型检查？

Answer 1

据我所知，目前 TypeScript 无法做到这一点。在你的决赛中 render()方法，您没有为 PropInjector 提供通用值.因此 TypeScript 不知道什么 T应该在里面 PropInjector .

解决方法是像这样定义一个中间组件:

class InputPropInjector extends PropInjector<InputProps> { }

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

有很多 discussion about this所以希望将来会有更好的解决方案。