Definitelytyped: @types/react-redux Children prop missing from connected component

[mbohgard]

If you know how to fix the issue, make a pull request instead.

• [X] I tried using the @types/react-redux package and had problems.
• [X] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [X] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [X] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @tkqubo @kenzierocks @clayne11 @tansongyang @nicholasboll @mdibyo @kallikrein @val1984 @jrakotoharisoa @apapirovski @surgeboris @soerenbf @mrwolfz @dylanvann @Lazyuki @kazuma1989
  
  

const connector = connect((s: { foo: string[] }) => s);

export const Comp: React.FC<{ someProp?: string } & ConnectedProps<
  typeof connector
>> = ({ children }) => {
  const c = children; // React.ReactNode

  return <>{c}</>;
};

const ConnectedComp = connector(Comp);

const C = <ConnectedComp>sjdf</ConnectedComp>;

TypeScript will complain here that Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & Pick<{ someProp?: string | undefined; } & { foo: string[]; } & DispatchProp<AnyAction>, "someProp">'.
If I remove the { someProp?: string; } & from the React.FC type argument it's fine. children is correctly typed inside the component. It's when I try to use the component I get the error.
Type of children doesn't matter either, the same error (with a different children type) occurs.

[grushetsky]

I've encountered the same issue. The problem occurs starting from version 7.1.4.

I think it has something to do with using NamedExoticComponent instead of ComponentClass: https://github.com/DefinitelyTyped/DefinitelyTyped/commit/f4cf543466a6103270e0181750e1a0d420293f35. Both Component class and FunctionComponent interface add children to the type of props:

declare namespace React {
    …
    class Component<P, S> {
        …
        readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;
        …
    }
    …
    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement | null;
        …
    }
    …
}

NamedExoticComponent extends ExoticComponent interface that doesn't take into account children prop:

declare namespace React {
    …
    interface ExoticComponent<P = {}> {
        /**
         * **NOTE**: Exotic components are not callable.
         */
        (props: P): (ReactElement|null);
        readonly $$typeof: symbol;
    }

    interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
        displayName?: string;
    }
    …
}

I'm not sure about the source of the problem here. Probably PropsWithChildren type should be used for props of ExoticComponent too.

Comments from the authors of @types/react and @types/react-redux would be appreciated.

[grushetsky]

The commit that was mentioned above (https://github.com/DefinitelyTyped/DefinitelyTyped/commit/f4cf543466a6103270e0181750e1a0d420293f35) was committed by @uniqueiniquity.

@uniqueiniquity, could you, please, take a look at this problem?

[uniqueiniquity]

You'll want someone with true understanding of react-redux to investigate - my role here is only DefinitelyTyped maintenance.
Maybe @OliverJAsh would be able to weigh in?

[OliverJAsh]

You have to manually define a children prop. The implicit prop has been deprecated. See:

• https://github.com/DefinitelyTyped/DefinitelyTyped/pull/33602
• https://github.com/DefinitelyTyped/DefinitelyTyped/pull/33602#issuecomment-470143143
• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/38678#issuecomment-539534741

[grushetsky]

@OliverJAsh, thank you for the explanation.

[EvanCahill]

This seems to cover the functional component case. However I would expect connected class components to accept children without having to explicitly specify it since in the component itself I can use this.props.children without having to explicitly specify it.