使用 withStyles 和 withTranslation HOC 包装 React 组件后，Typescript 显示错误

Question

我正在尝试使用 Typescript 编写 React 组件，withStyles 来自 @material-ui/core 和 withTranslation 来自 react-i18next。这两个包装器都是 HOC。

Typescript 抱怨类型有误。

出于某种原因，这条线不起作用：

export default withTranslation()(withStyles(styles)(HomePage)); // error

但是，如果我只使用 withStyles 或只使用 withTranslation，它会完美地工作：

export default withTranslation()(HomePage); // ok


export default withStyles(styles)(HomePage); // ok

我知道以这种方式导出我的组件时存在类型、接口问题或者可能有问题。当我将 withRouter 与 withStyles 一起使用时，我遇到了同样的问题。我通过更改他们在导出行中的顺序解决了错误！（不明白为什么要解决TBH）我看到一些建议将整个组件包装在 withStyles 下的解决方案，但对我来说这看起来很难看。有什么建议吗？

这是错误：

(alias) withStyles<"root", {}, {}>(style: Styles<Theme, {}, "root">, options?: {} | undefined): PropInjector<{
    classes: Record<"root", string>;
}, StyledComponentProps<"root">>
import withStyles

Argument of type 'ComponentType<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">>' is not assignable to parameter of type 'ComponentType<WithTranslation>'.
  Type 'ComponentClass<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">, any>' is not assignable to type 'ComponentType<WithTranslation>'.
    Type 'ComponentClass<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">, any>' is not assignable to type 'ComponentClass<WithTranslation, any>'.
      Types of property 'propTypes' are incompatible.
        Type 'WeakValidationMap<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">> | undefined' is not assignable to type 'WeakValidationMap<WithTranslation> | undefined'.
          Type 'WeakValidationMap<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">>' is not assignable to type 'WeakValidationMap<WithTranslation>'.
            Types of property 'i18n' are incompatible.
              Type 'Validator<{ changeLanguage: Function; }> | undefined' is not assignable to type 'Validator<i18n> | undefined'.
                Type 'Validator<{ changeLanguage: Function; }>' is not assignable to type 'Validator<i18n>'.
                  Type '{ changeLanguage: Function; }' is missing the following properties from type 'i18n': t, init, loadResources, use, and 28 more.ts(2345)
index.d.ts(80, 3): 'tReady' is declared here.

这是我的组件：

import React, { PureComponent } from "react";
// i18n
import { withTranslation } from "react-i18next";
import { InterfaceI18n } from "../../i18n";
// Stylus
import { WithStyles } from "@material-ui/core";
import withStyles from "@material-ui/core/styles/withStyles";
import styles from "./HomePage.style";

type WrapperPropsStylus = WithStyles<typeof styles>;
interface IProps extends InterfaceI18n, WrapperPropsStylus {}

class HomePage extends PureComponent<IProps> {
  changeLanguage = (lng: string) => {
    const { i18n } = this.props;
    i18n.changeLanguage(lng);
  };
  public render() {
    const { classes, t } = this.props;
    return (
      <div className={classes.root}>
        <div>
          This is the home page (Public page) <br />
        </div>
        {t("Welcome to React")} <br />
        <button onClick={() => this.changeLanguage("de")}>de</button>
        <button onClick={() => this.changeLanguage("en")}>en</button>
      </div>
    );
  }
}

export default withTranslation()(withStyles(styles)(HomePage));

Answer 1

嗯，为了解决这个问题我把Component改成了Hooks。只需使用 Hooks 而不是类组件，使用 TS 就容易多了。

使用 withStyles 和 withTranslation HOC 包装 React 组件后，Typescript 显示错误

Typescript shows error after wrapping a React component with withStyles and withTranslation HOC

reactjs

typescript

material-ui

react-i18next

react-with-styles