React Redux Typescript：“ ConnectedComponentClass”类型的参数

如何解决React Redux Typescript：“ ConnectedComponentClass”类型的参数

当我尝试使用connect方法将组件类连接到redux存储时遇到一些问题。如果我删除此connect方法，则看起来一切正常。

请指导我解决此问题。

组件代码：

const mapdispatchToProps: MapdispatchToPropsFunction<dispatchProps,{}> = (
  dispatch
) => ({
  changeDocumentState: (payload) => dispatch(changeDocumentState(payload)),});

const mapStatetoProps: MapStatetoProps<ReduxProps,{},AppState> = (
  state: AppState
): ReduxProps => ({
  user: selectCurrentUser(state),});

// tslint:disable-next-line:no-any
export const InfoTable = withStyles(styles,{ withTheme: true })(
  connect(mapStatetoProps,mapdispatchToProps)(TableComponent)
);

/home/node/src/components/InfoTable/InfoTable.tsx
(424,3): Argument of type 'ConnectedComponentClass<typeof TableComponent,Pick<Props,"page" | "classes" | "theme" | "data" | "label" | "location" | "rows" | "dataLength" | "rowsPerPage" | "handleChangePage" | "handleChangeRowsPerPage" | "hidePagination" | "handleOpen">>' is not assignable to parameter of type 'ComponentType<ConsistentWith<Pick<Props,"page" | "classes" | "theme" | "data" | "label" | "location" | "rows" | "dataLength" | "rowsPerPage" | "handleChangePage" | "handleChangeRowsPerPage" | "hidePagination" | "handleOpen">,WithStyles<...>>>'.
  Type 'ConnectedComponentClass<typeof TableComponent,"page" | "classes" | "theme" | "data" | "label" | "location" | "rows" | "dataLength" | "rowsPerPage" | "handleChangePage" | "handleChangeRowsPerPage" | "hidePagination" | "handleOpen">>' is not assignable to type 'ComponentClass<ConsistentWith<Pick<Props,WithStyles<...>>,any>'.
    Types of property 'propTypes' are incompatible.
      Type 'WeakValidationMap<Pick<Props,"page" | "classes" | "theme" | "data" | "label" | "location" | "rows" | "dataLength" | "rowsPerPage" | "handleChangePage" | "handleChangeRowsPerPage" | "hidePagination" | "handleOpen">> | undefined' is not assignable to type 'ValidationMap<ConsistentWith<Pick<Props,WithStyles<...>>> | undefined'.
        Type 'WeakValidationMap<Pick<Props,"page" | "classes" | "theme" | "data" | "label" | "location" | "rows" | "dataLength" | "rowsPerPage" | "handleChangePage" | "handleChangeRowsPerPage" | "hidePagination" | "handleOpen">>' is not assignable to type 'ValidationMap<ConsistentWith<Pick<Props,WithStyles<...>>>'.
          Types of property 'page' are incompatible.
            Type 'Validator<number | null | undefined> | undefined' is not assignable to type 'Validator<number | undefined> | undefined'.
              Type 'Validator<number | null | undefined>' is not assignable to type 'Validator<number | undefined>'.
                Type 'number | null | undefined' is not assignable to type 'number | undefined'.
                  Type 'null' is not assignable to type 'number | undefined'.

解决方法

您可以减少很多这样的类型：

const mapDispatchToProps  = {changeDocumentState} // If you just pass the function,it will behave just like your code above by wrapping the functions.
const mapStateToProps(
  state: AppState
) => ({
  user: selectCurrentUser(state),// Setting the type of the state is enough
});

export const InfoTable = withStyles(styles,{ withTheme: true })(
  connect(mapStateToProps,mapDispatchToProps)(TableComponent)
);