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> { ... }

我认为打字稿可以在这个代码下进行推断和类型检查，但它没有抛出任何错误。

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

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

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

打字稿类型检查的通用道具

1 个答案: