Understanding React Higher Order Components (HOC) and typescript

Question

Short version:

Why do I have to import types which I don't use in files which are wrapped by a Higher Order Component in typescript?

Long version:

While creating a Higher Order Component (short HOC) in typescript I get the following two typescript errors a lot:

TS4082:

ERROR in ./A.tsx
error TS4082: Default export of the module has or is using private name 'BProps'.
ERROR in ./B.tsx
error TS4082: Default export of the module has or is using private name 'AProps'.

TS2345:

error TS2345: Argument of type '...' is not assignable to parameter of type 'Attributes & Props'.
Object literal may only specify known properties, and 'foo' does not exist in type 'Attributes & Props'.

This question goes into detail about how to work with HOCs but don't help me with the why!

Why do I need the imports marked with a comment // WHY? in this example? (If I remove either of them I get typescript errors):

myHoc.tsx

import { AProps } from './A';
import { BProps } from './B';
...

export interface Props { ... }
export interface State { ... }
export interface myHocProps { ... }

export default (Component: React.ComponentType) => {
    return class extends React.Component<Props & AProps & BProps, State> {
        ...
    }
}

A.tsx

import { BProps } from './B';  // WHY?
import withSearch, {
    Props,  // WHY?
    State,  // WHY?
    myHocProps } from './myHoc';
...

export interface AProps { ... }

export class A extends React.Component<AProps & myHocProps> {
    ...
}

export default myHoc(A);

B.tsx

import { AProps } from './A';  // WHY?
import withSearch, {
    Props,  // WHY?
    State,  // WHY?
    myHocProps } from './myHoc';
...

export interface BProps { ... }

export class  extends React.Component<BProps & myHocProps> {
    ...
}

export default myHoc(B);

What I am seeing is you are creating a cycle by importing BProps inside AProps and AProps inside BProps. I assume the errors you see about the private names happen when you import AProps -> BProps -> AProps — Alexander Vitanov, Jun 05 '18 at 15:20
@AlexanderVitanov But if I remove either or both I get the TS4082 errors written in my question. So what should I do? — Andru, Jun 05 '18 at 15:23
While your approach is strange (the HOC should use generics to get the actual props of the component passed not hardcode all possible props) I am unable to reproduce your problem, removed all WHY imports and it still works .. — Titian Cernicova-Dragomir, Jun 05 '18 at 15:28

Understanding React Higher Order Components (HOC) and typescript

0 Answers0