reactjs - Props chung cho kiểm tra kiểu trong Typescript

Tôi muốn viết một thành phần sẽ nhận các thành phần và props, và hiển thị bằng cách chèn các props tùy chỉnh

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

Khi tôi test với Input mà các props được định nghĩa như thế này,

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

Tôi nghĩ TypeScript có thể suy diễn và kiểm tra kiểu trên đoạn mã này, nhưng nó đã không báo lỗi nào.

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

Làm thế nào để tôi khiến Typescript suy luận P, và thực hiện một số kiểm tra kiểu trên componentProps với P khi sử dụng PropInjector?

Câu trả lời #1

Theo như tôi biết, điều này hiện tại không khả thi với TypeScript. Trong phương thức render() cuối cùng của bạn, bạn không cung cấp một giá trị tổng quát cho PropInjector. Do đó, TypeScript không biết T dự định là gì bên trong PropInjector.

Một cách khắc phục là định nghĩa một thành phần trung gian như sau:

class InputPropInjector extends PropInjector<InputProps> { }

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

Đã có khá nhiều cuộc thảo luận về vấn đề này nên hy vọng một giải pháp tốt hơn sẽ có trong tương lai.