Typescript 类型检查的通用道具

Question

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

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 测试时，哪些道具是这样定义的，

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 已经有了很多，所以希望将来会有更好的解决方案。