loading...

re: React Higher-Order Components in TypeScript made simple VIEW POST

TOP OF THREAD FULL DISCUSSION
re: Hello Dan, thank you very much for this detailed introduction to typing HOCs. I'm just migrating from flow to typescript (one reason are HOCs AND p...
 

Hi, if I understand you correctly, you really should be able to remove the DemoProps interface altogether and write:
const DemoComponent = (props: InjectedProps): JSX.Element
What exactly does the TypeScript. compiler say?

 

When I try this, the compiler complains that <DemoComponent/> (when it's being used) does not provide InjectedProps. If I keep the empty interface, the compiler does not complain. I do remember having read something similar related to flow. I mean that you have to explicitly set an empty object in addition to the injected props, but I may be wrong.

Even though, I do not understand why there is is a difference between declaring the Props explicitly via an interface, which works, and simply setting const DemoComponent = (props: {} & InjectedProps): JSX.Element which does not work.

here is a link to a little sandbox: codesandbox.io/s/9zvrln93z4

if you replace Props with {} in hoc/HocA.tsx, it'll tell you the following in index.tsx:

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<<InjectedProps>.WithHocA> & Readonly<{ children?: ...'.
  Type '{}' is not assignable to type 'Readonly<ResultProps>'.
    Property 'message' is missing in type '{}'.

message in the case of the sandbox is part of the InjectedProps defined in hoc/withHocA.tsx

I tried replicating what you describe, but for me it works without problems even without the Props added.
codesandbox.io/s/1kkkyyjpl

code of conduct - report abuse