TypeScript 2.6 -> material-ui 1.0.0-beta.24 withStyles 和 react-router withRouter -> 类型中缺少属性“类”

Question

我已经可以一起使用高阶组件withStyles 和withRouter 没有问题，但是升级到最新版本导致了错误。

https://reactjs.org/docs/higher-order-components.html

使用的包：

"@types/react-router": "^4.0.20",
"@types/react-router-dom": "^4.2.3",
"material-ui": "^1.0.0-beta.24",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

我一直在查看这两个库的测试，并一一实现它们不是问题：

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-router/test/WithRouter.tsx

https://github.com/mui-org/material-ui/blob/v1-beta/test/typescript/styles.spec.tsx

但是，当我尝试将它们组合起来时，我得到了这个错误：

TS2322: 输入 '{ text: "foo"; }' 不可分配给类型 'IntrinsicAttributes & Pick & WithStyles，“文本”......'。输入'{ text: "foo"; }' 是 不可分配输入“选择 & WithStyles, "文本" | “类” | “主题”>。财产 '{ text: "foo"; 类型中缺少 'classes'； }'。

代码，错误只发生在<DecoratedComponent text="foo" />;这一行

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactRouter from 'react-router';
import { Redirect, Route, Switch, withRouter, RouteComponentProps  } from 'react-router-dom';
import Grid from 'material-ui/Grid';
import { withStyles, WithStyles, StyleRulesCallback } from 'material-ui/styles';
import { CustomTheme } from 'Features/Client/Styles/MainTheme';
import 'Styles/App.css';
import * as es6ObjectAssign from 'es6-object-assign';
es6ObjectAssign.polyfill();

type withStyleProps = 'mainStyle' | 'innerStyle';

const styles: StyleRulesCallback<withStyleProps> = (theme: CustomTheme) => ({
  mainStyle: {
    backgroundColor: '#F7F7F7',
    minHeight: '100vh',
  } as React.CSSProperties,

  innerStyle: {
    padding: theme.spacing.small,
    paddingTop: 0,
    paddingBottom: 0,
    maxWidth: '90rem',
    margin: '0 auto',
  } as React.CSSProperties,
});

interface IProps {
  text: string;
}

interface IState {

}

class App extends React.Component<IProps & WithStyles<withStyleProps>, IState> {
  constructor(props: IProps & WithStyles<withStyleProps>) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.mainStyle}>
        <div className={classes.innerStyle}>
          <DecoratedComponent text="foo" />;
        </div>
      </div>
    );
  }
}
export default withStyles(styles)(App);

const DecoratedComponent = withStyles(styles)(withRouter(
  class extends React.Component<IProps & RouteComponentProps<{}> & WithStyles<withStyleProps>> {
    render() {
      const { classes, text } = this.props;
      return <div className={classes.mainStyle}>{text}</div>;
    }
  }
));

Answer 1

更新：

将使用构造函数且不想复制和粘贴IProps2 & RouteComponentProps<IProps> & WithStyles<withStyleProps>的组件的解决方案@

interface IProps2 {
  text: string;
}

type Props2 = IProps2 & RouteComponentProps<{}> & WithStyles<withStyleProps>;

const DecoratedComponent = withRouter(withStyles(styles)(
  class extends React.Component<Props2> {
    render() {
      const { classes, text } = this.props;
      return <div className={classes.mainStyle}>{text}</div>;
    }
  }
));

原文：

现在通过将withRouter 放在首位和withStyles 放在后面来设法解决它。

const DecoratedComponent = withRouter(withStyles(styles)(
  class extends React.Component<IProps & RouteComponentProps<IProps> & WithStyles<withStyleProps>> {
    render() {
      const { classes, text } = this.props;
      return <div className={classes.mainStyle}>{text}</div>;
    }
  }
));