TypeScript 2.6 -> material-ui 1.0.0-beta.24 withStyles with 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：type'{text：" foo";}'不能分配给类型 'intinsInsICATTRIBUTES＆amp;选择 withStyles，" text" ...'。键入'{text：" foo";}' 是 无法分配给'pick＆amp; withstyles，"文本" |"类" |"主题">'。财产 类型'{text：" foo"中缺少"类"；}'。

代码，错误仅针对行<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>;
    }
  }
));