Typescript：为什么 Material-UI “withStyles()” 不能与显式构造函数一起使用？

Question

编辑：

请注意，IntelliJ IDEA 生成了错误的构造函数。现已修复此问题，请参阅：https://youtrack.jetbrains.com/issue/WEB-35178

---

我正在考虑在我的应用程序中使用 Material-UI，但我在将 withStyles 样式解决方案与 TypeScript 结合使用时遇到了一些问题。

我正在尝试基于Popper documentation 制作自己的小包装组件。

问题是，如果我按照我习惯的方式明确定义构造函数（下面代码中的(B)），那么这一行：

export default withStyles(styles)(HelpComponent);

给出这个错误：

ERROR in [at-loader] ./src/main/ts/screen/keyword/HelpComponent.tsx:150:35 
    TS2345: Argument of type 'typeof HelpComponent' is not assignable to parameter of type 'ComponentType<never>'.
  Type 'typeof HelpComponent' is not assignable to type 'StatelessComponent<never>'.
    Type 'typeof HelpComponent' provides no match for the signature '(props: never, context?: any): ReactElement<any> | null'.

我能够完成这项工作的唯一方法是省略显式构造函数并将状态定义为字段（下面代码中的(A)）。

当我使用withStyles 时，有没有办法以正常方式声明构造函数？

我实际上不介意像这样直接设置状态，它有点少样板。我是否通过以这种方式在构造函数之外初始化状态来放弃任何东西？

最终，我只是不明白那个 TypeScript 错误消息 - 谁能解释它想说什么？

import {
  createStyles,
  Paper,
  Popper,
  Theme,
  WithStyles,
  withStyles
} from '@material-ui/core';
import * as React from 'react';
import {ReactNode, SyntheticEvent} from 'react';
import {EventUtil} from "appUtil/EventUtil";
import {WarningSvg} from "component/svg-icon/WarningSvg";
let log = require("log4javascript").getLogger("HelpComponent");

export interface HelpComponentProps extends WithStyles<typeof styles> {
  children:ReactNode;
}

export interface HelpComponentState {
  open:boolean;
  arrowRef?: HTMLElement;
}

class HelpComponent extends React.Component<HelpComponentProps, HelpComponentState> {
  helpRef!: HTMLElement;

  // (A)
  state = {open: false, arrowRef: undefined};

  // (B)
  // constructor(props: HelpComponentProps, context: HelpComponentState){
  //   super(props, context);
  //   this.state = {open: false, arrowRef: undefined};
  // }

  handleClick = (event:SyntheticEvent<any>) => {
    EventUtil.stopClick(event);
    this.setState({open: !this.state.open,});
  };

  handleArrowRef = (node:HTMLElement) => {
    this.setState({
      arrowRef: node,
    });
  };

  render(){
    const {classes} = this.props;
    return <span ref={(ref)=>{if(ref) this.helpRef = ref}}>
      <WarningSvg onClick={this.handleClick}/>
      <Popper id={"help-popper"} className={classes.popper} transition
        open={this.state.open} anchorEl={this.helpRef}
        modifiers={{arrow:{enabled:true, element: this.state.arrowRef}}}
      >
        <span className={classes.arrow} ref={this.handleArrowRef}/>
        <Paper className={classes.paper}>{this.props.children}</Paper>
      </Popper>
    </span>;
  }

}

const styles = (theme: Theme) => createStyles({
  root: {
    flexGrow: 1,
  },
  scrollContainer: {
    height: 400,
    overflow: 'auto',
    marginBottom: theme.spacing.unit * 3,
  },
  scroll: {
    position: 'relative',
    width: '230%',
    backgroundColor: theme.palette.background.paper,
    height: '230%',
  },
  legend: {
    marginTop: theme.spacing.unit * 2,
    maxWidth: 300,
  },
  paper: {
    maxWidth: 400,
    overflow: 'auto',
  },
  select: {
    width: 200,
  },
  popper: {
    zIndex: 1,
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      left: 0,
      marginTop: '-0.9em',
      width: '3em',
      height: '1em',
      '&::before': {
        borderWidth: '0 1em 1em 1em',
        borderColor: `transparent transparent ${theme.palette.common.white} transparent`,
      },
    },
    '&[x-placement*="top"] $arrow': {
      bottom: 0,
      left: 0,
      marginBottom: '-0.9em',
      width: '3em',
      height: '1em',
      '&::before': {
        borderWidth: '1em 1em 0 1em',
        borderColor: `${theme.palette.common.white} transparent transparent transparent`,
      },
    },
    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: '-0.9em',
      height: '3em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 1em 1em 0',
        borderColor: `transparent ${theme.palette.common.white} transparent transparent`,
      },
    },
    '&[x-placement*="left"] $arrow': {
      right: 0,
      marginRight: '-0.9em',
      height: '3em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 0 1em 1em',
        borderColor: `transparent transparent transparent ${theme.palette.common.white}`,
      },
    },
  },
  arrow: {
    position: 'absolute',
    fontSize: 7,
    width: '3em',
    height: '3em',
    '&::before': {
      content: '""',
      margin: 'auto',
      display: 'block',
      width: 0,
      height: 0,
      borderStyle: 'solid',
    },
  },
});

export default withStyles(styles)(HelpComponent);

版本：

• “打字稿”：“3.0.3”
• “@types/react”：“16.4.14”
• “@types/react-dom”：“16.0.7”
• “@material-ui/core”：“3.1.1”
• “webpack”：“4.19.1”

Answer 1

如果你看React.ComponentType的定义：

type ComponentType<P = {}> = ComponentClass<P> | StatelessComponent<P>;

您尝试使用的替代方法是ComponentClass，其定义为：

interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
    new (props: P, context?: any): Component<P, S>;
    // ...
}

注意context 参数是可选的（? 标记）。问题是构造函数的context 参数不是可选的，因此HelpComponent 与期望能够省略context 参数的调用者不兼容。如果您将参数设为可选，则错误应该会消失。

当TypeScript报错typeof HelpComponent不可赋值给联合类型React.ComponentType时，它会半随意地选择联合类型的一个成员来报告详细的错误。不幸的是，它没有选择您想要的那个，所以错误消息不是很有用。

我实际上不介意像这样直接设置状态，它有点少样板。通过这种方式在构造函数之外初始化状态，我是否放弃了任何东西？

是的，通过覆盖 state 属性，您可能会无意中将其类型更改为与您传递给 React.Component 基类的状态类型参数不同的东西。