Recompose + TypeScript - 附加道具的類型錯誤

Question

我目前正在嘗試使用 Recompose 在一個項目上實現 TypeScript 以增強以下組件：

import { compose } from 'recompose';

// This is my Base Component that is reused throughout the App.
interface BaseOuterProps {
 value: any;
}

const StatelessBaseComponent = () => <div />;
const BaseComponent = compose<any, BaseOuterProps>(...)(StatelessBaseComponent);

// This is one of the higher components that needs to use the Base Component by enhancing it.

interface HigherInnerProps {
 value: any;
 something: any;
}

const HigherComponent = compose<HigherInnerProps, any>(...)(BaseComponent);

我遇到的問題是，當 HigherComponent 類型 (HigherInnerProps) 的 props 比 BaseComponent 類型 (BaseOuterProps) 多時，我收到以下錯誤：

類型 'ComponentClass< BaseOuterProps>' 不匹配簽名 '(props: HigherInnerProps & { children?: ReactNode; }, context?: any): ReactElement | 空值'

我試圖使 BaseOuterProps 更加靈活：

interface BaseOuterProps {
 value: any;
 [key: string]: any | void | null;
}

沒有運氣。

類型由@types/react 和@types/recompose 提供。

關於如何保留類型鏈接並滿足錯誤要求的任何想法？

Answer 1

如果你嘗試怎么辦

import { compose } from 'recompose';

// This is my Base Component that is reused throughout the App.
interface BaseOuterProps {
  value: any;
}

const StatelessBaseComponent = () => <div />;
const BaseComponent = compose<BaseOuterProps, any>(...) 
  (StatelessBaseComponent);

// This is one of the higher components that needs to use the Base Component by enhancing it.

interface HigherInnerProps {
  value: any;
  something: any;
}

const HigherComponent = compose<BaseOuterProps & HigherInnerProps, HigherInnerProps>(...)(BaseComponent);

Answer 2

1-在根目錄中創建文件夾@types

2-創建文件夾重組並在其中進行組合

├── src
├── @types
│   └── recompose
│       └── compose
│           └── index.d.ts
└── tsconfig.json

3- 在 tsconfig.json 中添加以下內容

{
  ...
  "compilerOptions": {
    ...
    "typeRoots": ["./@types"],
    ...
  },
  ...
}

4- 在 index.d.ts 中添加以下行

declare module 'recompose/compose';