reactjs - Generički Props za provjeru tipa u Typescriptu

Želim napisati komponentu koja će primati komponente i props, i renderirati ih s ubacivanjem prilagođenih propsa

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

Kada testiram s Input čiji su svojstva definirana ovako,

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

Mislio sam da TypeScript može inferirati i provjeriti tipove u ovom kodu ispod, ali nije bacio nikakve pogreške.

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

Kako mogu natjerati Typescript da zaključi P i izvrši provjeru tipa na componentProps s P kada koristim PropInjector?

Odgovor #1

Koliko ja znam, to trenutno nije moguće s TypeScriptom. U vašoj konačnoj render() metodi, ne pružate generičku vrijednost za PropInjector. Stoga TypeScript nema pojma što T treba biti unutar PropInjector.

Zaobilazno rješenje je definirati međukomponentu ovako:

class InputPropInjector extends PropInjector<InputProps> { }

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

Bilo je dosta rasprave o ovome, pa se nadamo da će u budućnosti biti dostupno bolje rješenje.