2

Here is what I want in the end, a wrapper component that renders passed in the final component only when data is fetched and validated successfully

<Wrapper
  url="/foo"
  as={FooComponent}
  validate={fooResponse => fooResponse != null}
  fooPropsA={1}
  fooPropsB={2}
/>

Here is my latest attempt https://tsplay.dev/3NDZOW

In brief, the requirements are following:

  1. inner component must have value prop to accept fetched value on a real render
  2. validate function argument should be inferred from inner component (prop) types
  3. wrapper component should accept all props of inner component, except value

Is it possible?

Note: there are similar questions which either says it's not possible or does slightly different job, but I failed to apply them to my case, thus not sure if it's even possible

1. Similar logic component https://stackoverflow.com/questions/51762529/use-props-to-pass-another-componentprops-to-be-rendered-and-keep-type-safety

2. Regarding type inference https://stackoverflow.com/questions/56505560/could-be-instantiated-with-a-different-subtype-of-constraint-object-ts2322

amankkg
  • 4,503
  • 1
  • 19
  • 30
  • 1
    It should be possible since [styled-components does something similar](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2304249848c6ce77d048312f159efa5fa6fae4ec/types/styled-components/index.d.ts#L61) albeit with some tradeoffs with advanced types like discriminated unions of props due to the inference. – evelynhathaway Feb 07 '21 at 17:04
  • 1
    @evelynhathaway seems like they're not handling type parameters of the inner component, as I understand the problem part here is point #2 in my question. However, your link suggested me another benefit I was unaware of - `React.ComponentPropsWithRef` – amankkg Feb 08 '21 at 08:56

0 Answers0