I'm currently solving the challenge of annotating the types for the different styles in my code. After converting from plain JavaScript to TypeScript, I am now adding type annotations. Here is a snippet of the code:
import * as React from 'react'
import { withStyles } from '@material-ui/core'
@withStyles(styles) // encountering a TYPE ERROR HERE
export default class App extends React.Component<{}, {}> {
render(): JSX.Element {
return (
<div className="some-class"> Hello </div>
)
}
}
function styles() {
return {
'@global': {
'.some-class': {
overflowX: 'hidden'
},
},
}
}
I'm seeking input on how to correctly type this portion of the code. Initially, I received an error message like:
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'.
To address this issue, I made some adjustments by utilizing createStyles:
import * as React from 'react'
import { withStyles, createStyles } from '@material-ui/core'
@withStyles(styles) // facing another TYPE ERROR HERE
export default class App extends React.Component<{}, {}> {
render(): JSX.Element {
return (
<div className="some-class"> Hello </div>
)
}
}
function styles() {
return createStyles({
'@global': {
'.some-class': {
overflowX: 'hidden'
},
},
})
}
After making these changes, a new error emerged:
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) // ANOTHER TYPE ERROR HERE
~~~~~~~~~~~~~~~~~~~
In a more complex part of my actual project codebase, a similar error occurred regarding matching the Component type:
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)
~~~~~~~~~~~~~~~~~~~
This error specifically highlights that the method makeOnStatusWindowClick has not been defined within the component class.