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;

推荐人