将 Redux-Form 与 React-Redux connect 结合使用时出现 TypeScript 错误

Question

我爱上了 TypeScript，直到我发现 Redux-Form 与 React-Redux 之间存在一些非常令人沮丧的不兼容性。

我的目标是用 react-redux connect 装饰器包装一个 reduxForm 装饰组件——这种模式在 babel 配置中一直对我有用，并且似乎遵循 HOC 方法.这是一个例子：

import * as React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { reduxForm, Field, InjectedFormProps } from 'redux-form';

interface SampleFormData {
  username: string;
}

interface SampleFormProps {
  saveData: (data: SampleFormData) => void;
}

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>;

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
  <form onSubmit={props.handleSubmit(props.saveData)}>
    <Field name="username" component="input" />
  </form>
);

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm);

export default connect(
  () => ({}),
  (dispatch) => ({
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data })
  })
)(DecoratedSampleForm);

这是 TypeScript 抛出的错误：

> Argument of type 'DecoratedComponentClass<SampleFormData,
> Partial<ConfigProps<SampleFormData, {}>>>' is not assignable to
> parameter of type 'ComponentType<{ saveData: (data: SampleFormData) =>
> { type: string; data: SampleFormData; }; }>'.
> 
> Type 'DecoratedComponentClass<SampleFormData,
> Partial<ConfigProps<SampleFormData, {}>>>' is not assignable to type
> 'StatelessComponent<{ saveData: (data: SampleFormData) => { type:
> string; data: SampleFormData; };...'.
> 
> Type 'DecoratedComponentClass<SampleFormData,
> Partial<ConfigProps<SampleFormData, {}>>>' provides no match for the
> signature '(props: { saveData: (data: SampleFormData) => { type:
> string; data: SampleFormData; }; } & { children?: ReactNode; },
> context?: any): ReactElement<any>'.

有没有人找到让 react-redux 接受 DecoratedComponentClass 类型的解决方案？我找到了一个来使用 "middle" 组件，但我还没有设法让它与 thunk 动作一起使用。另外，我发现在输入表单的道具方面，这会产生比解决问题更多的问题。

Answer 1

对于遇到此问题的任何人，我发现我可以通过为连接语句提供空 TStateProps 和 TDispatchProps 对象来消除错误。

interface SampleFormData {
  username: string;
}

interface SampleFormProps {
  saveData: (data: SampleFormData) => void;
}

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>;

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
  <form onSubmit={props.handleSubmit(props.saveData)}>
    <Field name="username" component="input" />
  </form>
);

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm);

export default connect<{},{}>(
  () => ({}),
  (dispatch) => ({
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data })
  })
)(DecoratedSampleForm);

这样做的一个缺点是它迫使我们盲目地提供 connect 道具，但我觉得这是一个比编写覆盖 @types 声明更优雅的解决方案。

为了解决这个缺点，我能够通过提供正确的接口与空对象的连接来验证类型；但是，此方法只能临时执行以检查绑定，因为它不能解决 DecoratedComponentClass 错误。

export default connect<{}, SampleFormProps, InjectedFormProps<SampleFormData>>(
  () => ({}),
  (dispatch) => ({
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data })
  })
)(DecoratedSampleForm);

Answer 2

更高的组件接口声明完成了使用装饰器将 Type 与组件状态和 props Type 连接起来的技巧。

connect.ts

import * as React from "react";
import {
  connect as originalConnect,
  MapStateToPropsParam,
  MergeProps,
  Options
} from "react-redux";
import { IState } from "./index";

export interface IDisPatchProps {
  [key: string]: () => void;
}

export type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> = <
  TComponent extends React.ComponentType<TInjectedProps & TNeedsProps>
>(
  component: TComponent
) => TComponent;

export interface IConnectProps {
  <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
    mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, IState>,
    mapDispatchToProps?: IDisPatchProps
  ): InferableComponentEnhancerWithProps<
    TStateProps & TDispatchProps,
    TOwnProps
  >;

  <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
    mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, IState>,
    mapDispatchToProps?: IDisPatchProps,
    mergeProps?: MergeProps<
      TStateProps,
      TDispatchProps,
      TOwnProps,
      TMergedProps
    >,
    options?: Options<TStateProps, TOwnProps, TMergedProps>
  ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
}

declare module "react-redux" {
  // tslint:disable-next-line
  interface Connect extends IConnectProps {}
}

export const connect = originalConnect as IConnectProps;


 ***ClassFile***

 @connect(
  (state: IState): IStateProps => ({
    count: state.counter.count,
    isLoading: state.counter.isLoading
  }),
  {
    decrement,
    increment
  }
)
export default class MyApp

Link: https://github.com/TomasHubelbauer/react-redux-typescript-connect-decorator-demo/blob/master/my-app/src/connect.ts

致谢：TomasHubelbauer https://github.com/TomasHubelbauer

将 Redux-Form 与 React-Redux connect 结合使用时出现 TypeScript 错误

TypeScript errors when using Redux-Form with React-Redux connect

typescript

reactjs

redux

redux-form

react-redux