Машинопись на React HOC

Question

У меня React HOC, структурированный так:

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

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

export default withCookies;

Я получил 2 предупреждения Typescript об этом, которые я хотел бы исправить.Оба в объявлениях типа any:

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

Для типа props я не знаю, какие свойства или типы значений могут быть в объекте props, так какмогу ли я определить его лучше, чем any?

Для типа WrappedComponent я пробовал типы типа ReactNode или ReactElement, но это приводит к новой ошибке при фактическом использовании: JSX element type 'WrappedComponent' does not have any construct or call signatures.

Answer 1

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