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類型，我不知道會是什么性質或價值類型的道具對象，所以我怎么能確定它優於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;

推薦人