reactjs - Yleiset ominaisuudet Typescript-tyypin tarkistusta varten

Haluan kirjoittaa komponentin, joka vastaanottaa komponentteja ja propseja, ja renderöi injektoimalla mukautettuja propseja

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

Kun testaan Input-komponentilla, jonka propsit on määritelty näin,

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

Luulin, että TypeScript voisi päätellä ja tarkistaa tyypit tässä alla olevassa koodissa, mutta se ei antanut virheitä.

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

Kuinka voin saada Typescriptin päättelemään P ja tekemään tyyppitarkistuksen componentPropsin kanssa P käyttäessäni PropInjector?

Vastaus #1

Niin pitkälle kuin tiedän, tämä ei ole tällä hetkellä mahdollista TypeScriptillä. Lopullisessa render()-metodissasi et anna geneeristä arvoa PropInjector-komponentille. Siksi TypeScriptillä ei ole aavistustakaan, mitä T pitäisi olla PropInjector-sisällä.

Kiertotie on määritellä välikomponentti näin:

class InputPropInjector extends PropInjector<InputProps> { }

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

Tästä on keskusteltu melko paljon, joten toivottavasti parempi ratkaisu on saatavilla tulevaisuudessa.