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 eslint 警告。两者都在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