CODEWITHSUNDEEP
javascriptreactjstypescripteslint
CaribouCode
CaribouCode

Reputation: 14398

Typescript on React HOC

I have a React HOC structured like this:

import React from 'react';
import { CookiesConsumer } from './index';

const withCookies = (WrappedComponent: any) => (props: any) => (
  <CookiesConsumer>
    {cookies => (
      <WrappedComponent
        {...props}
        cookiesContext={cookies}
      />
    )}
  </CookiesConsumer>
);

export default withCookies;

I get 2 Typescript eslint warnings on this that I'd like to fix. Both on the any type declarations:

Unexpected any. Specify a different type.eslint(@typescript-eslint/no-explicit-any)

For the props type, I don't know what properties or value types might be in the props object, so how can I define it better than any?

For the WrappedComponent type I've tried types like ReactNode or ReactElement but that throws a new error on the actual usage of : JSX element type 'WrappedComponent' does not have any construct or call signatures.

Upvotes: 0

Views: 286

Answers (1)

Lidor Avitan
Lidor Avitan

Reputation: 1404

import React from 'react';
import { CookiesConsumer } from './index';

interface withCookiesProps {
    someProp: boolean;
  }


const withCookies = <P extends object>(WrappedComponent: React.ComponentType<P>) => (props: P & withCookiesProps) => (
  <CookiesConsumer>
    {cookies => (
      <WrappedComponent
        {...props}
        cookiesContext={cookies}
      />
    )}
  </CookiesConsumer>
);

export default withCookies;

Refernence

Upvotes: 7

Related Questions