使用 Material-UI 高阶组件的 Typescript 错误类型答案

【问题标题】：Typescript wrong type with Material-UI Higher Order Components使用 Material-UI 高阶组件的 Typescript 错误类型
【发布时间】：2019-02-19 16:21:36
【问题描述】：

我正在尝试从 Material-UI 1.x 更新到 Material-UI 3.9.2。

我有一些组件，包括下面的示例，它们与 高阶组件 (HOC) 一起正常工作，但我很难将它们迁移到 3.9.2。

在这个例子中，我减少了一个问题，但不明白为什么打字错误（Typescript 3.3.3）。在我看来，这与 MUI PropInjector 的工作方式是一致的。

这是一个例子：

import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core';
import Dialog, { DialogProps } from '@material-ui/core/Dialog';

const styles = (theme: Theme) => createStyles({
    defaultPaperWidthSm: {
        backgroundColor: "#fafafa",
        minWidth: 320,
        maxWidth: 700
    },
    largePaperWidthSm: {
        backgroundColor: "#fafafa",
        width: 700,
        maxWidth: 700,
        [theme.breakpoints.up('md')]: {
            minWidth: 900,
            width: "unset",
            maxWidth: "80vw",
        }
    }
})

export default withStyles(styles)(
    function ResponsiveDialog(props: DialogProps & WithStyles<typeof styles>) {
        let { classes, className, ...otherProps } = props
        return <Dialog {...otherProps} />
    }
)

将其用作组件：

<ResponsiveDialog open={true}>
    <span>Blabla</span>
</ResponsiveDialog>

它返回这个错误，我不明白为什么：

类型'{孩子：元素;打开：布尔值； }' 不可分配给类型 'IntrinsicAttributes & Pick & StyledComponentProps & { children?: ReactNode; }'。

“IntrinsicAttributes & Pick & StyledComponentProps”类型上不存在属性“open” & { children?: ReactNode; }'。

【问题讨论】：

标签： node.js typescript material-ui

【解决方案1】：

找到了！

如果我使用箭头函数，它就可以工作：

export default withStyles(styles)(
    (props: DialogProps & WithStyles<typeof styles>) => {
        let { classes, className, ...otherProps } = props
        return <Dialog {...otherProps} />
    }
)

当我组合多个 HOC 时仍然存在问题，我感觉 MUI 类型目前有点损坏。但这是另一个问题。

【讨论】：