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


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 performance).

I have one question. In case DemoComponent would not require the text prop, the interface would look like this:

interface DemoProps {}

When I now use Demo or DemoWithDebug in my app (as in <Demo/> or <DemoWithDebug/>), everything works fine and Typescript does not complain. But since I have an empty interface, I thought I could remove it.

But then the compiler starts complaining that the InjectedProp props is/are missing.

I assume this is because the compiler does not understand that the injected props are coming from my HOC and that <Demo/> or <DemoWithDebug/> should provide it.

That still makes sense somehow. But we do I need an extra interface here? The following does not work. Is {} different from explicitly defining an interface?

This seems to be wrong. Or is there a short form ?
const DemoComponent = (props: {} & InjectedProps): JSX.Element


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:

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.

code of conduct - report abuse