示例中如何键入 Material-UI 的 `withStyles` 装饰器？

Question

我正在尝试弄清楚如何注释以下样式的类型（我从纯 JavaScript 转换为 TypeScript 并正在添加类型注释）：

import * as React from 'react'
import { withStyles } from '@material-ui/core'

@withStyles(styles) // TYPE ERROR HERE
export default class App extends React.Component<{}, {}> {
    render(): JSX.Element {
        return (
            <div className="some-class"> Hello </div>
        )
    }
}

function styles() {
    return {
        // assume I need to use global styles, my actual project is more
        // complex and for some reasons I need to use global styles
        '@global': {
            '.some-class': {
                overflowX: 'hidden'
            },
        },
    }
}

我们如何输入这个？

起初，它给了我这样的错误：

        Types of property 'overflowX' are incompatible.
          Type 'string' is not assignable to type '"scroll" | "hidden" | "visible" | "auto" | "clip" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined'.

所以我将其更改为以下使用createStyles：

import * as React from 'react'
import { withStyles, createStyles } from '@material-ui/core'

@withStyles(styles) // TYPE ERROR HERE
export default class App extends React.Component<{}, {}> {
    render(): JSX.Element {
        return (
            <div className="some-class"> Hello </div>
        )
    }
}

function styles() {
    return createStyles({
        // assume I need to use global styles, my actual project is more
        // complex and for some reasons I need to use global styles
        '@global': {
            '.some-class': {
                overflowX: 'hidden'
            },
        },
    })
}

现在我得到了这个错误：

tmp.tsx:5:1 - error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<{}, never> & StyledComponentProps<"@global">, any>' is not assignable to type 'void | typeof App'.
    Type 'ComponentClass<Pick<{}, never> & StyledComponentProps<"@global">, any>' is not assignable to type 'typeof App'.
      Type 'Component<Pick<{}, never> & StyledComponentProps<"@global">, any, any>' is not assignable to type 'App'.
        Types of property 'render' are incompatible.
          Type '() => ReactNode' is not assignable to type '() => Element'.
            Type 'ReactNode' is not assignable to type 'Element'.
              Type 'undefined' is not assignable to type 'Element'.

5 @withStyles(styles) // TYPE ERROR HERE
  ~~~~~~~~~~~~~~~~~~~

在我实际的更复杂的代码中，错误类似，关于无法匹配Component 类型：

App.tsx:44:1 - error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<AppProps, never> & StyledComponentProps<"@global">, any>' is not assignable to type 'void | typeof App'.
    Type 'ComponentClass<Pick<AppProps, never> & StyledComponentProps<"@global">, any>' is not assignable to type 'typeof App'.
      Type 'Component<Pick<AppProps, never> & StyledComponentProps<"@global">, any, any>' is not assignable to type 'App'.
        Property 'makeOnStatusWindowClick' is missing in type 'Component<Pick<AppProps, never> & StyledComponentProps<"@global">, any, any>'.

44 @withStyles(styles)
   ~~~~~~~~~~~~~~~~~~~

makeOnStatusWindowClick 是我的组件类中定义的第一个方法。

Answer 1

Daniel 链接到的 Material UI 文档

很遗憾，由于当前 TypeScript 装饰器的限制，withStyles(styles) 不能用作 TypeScript 中的装饰器。

所以我可以通过做两件事来让它工作：

• 在我的styles函数的返回对象上使用createStyles（并且不要在函数上使用显式的返回类型定义，以便它使用createStyles生成的返回类型）
• 将withStyles 用作而不是装饰器
• 使用WithStyles 作为道具，使用自动检测到的styles 类型

代码如下：

import * as React from 'react'
import { withStyles, WithStyles, createStyles } from '@material-ui/core'

interface Props extends WithStyles<typeof styles> {}

class App extends React.Component<Props, {}> {
    render(): JSX.Element {
        return (
            <div className="some-class"> Hello </div>
        )
    }
}

export default withStyles(styles)(App)

function styles() /*: do not put a return type here */ {
    return createStyles({
        // assume I need to use global styles, my actual project is more
        // complex and for some reasons I need to use global styles
        '@global': {
            '.some-class': {
                overflowX: 'hidden'
            },
        },
    })
}

Answer 2

幸运的是，他们在这里有大量关于打字稿的文档https://material-ui.com/guides/typescript/

你也没有提到你遇到的错误，所以很难知道哪里出了问题

可能您的道具类型缺少classes 字段