loading...

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

TOP OF THREAD FULL DISCUSSION
re: Hi, if I understand you correctly, you really should be able to remove the DemoProps interface altogether and write: const DemoComponent = (props: ...
 

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