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.
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
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
DemoComponentwould not require thetextprop, the interface would look like this:When I now use
DemoorDemoWithDebugin 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
propsis/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.ElementHi, if I understand you correctly, you really should be able to remove the
DemoPropsinterface altogether and write:const DemoComponent = (props: InjectedProps): JSX.ElementWhat exactly does the TypeScript. compiler say?
When I try this, the compiler complains that
<DemoComponent/>(when it's being used) does not provideInjectedProps. 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
Propsexplicitly via an interface, which works, and simply settingconst DemoComponent = (props: {} & InjectedProps): JSX.Elementwhich does not work.here is a link to a little sandbox: codesandbox.io/s/9zvrln93z4
if you replace
Propswith{}inhoc/HocA.tsx, it'll tell you the following in index.tsx:messagein the case of the sandbox is part of theInjectedPropsdefined inhoc/withHocA.tsxI tried replicating what you describe, but for me it works without problems even without the
Propsadded.codesandbox.io/s/1kkkyyjpl