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）的道具多于BaseComponent类型（BaseOuterProps）时，我收到以下错误消息：

类型'ComponentClass '不提供与签名'（props：HigherInnerProps＆{children ?: ReactNode;}，上下文？：任何）：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';

重组+ TypeScript-其他道具输入错误

2 个答案: