typescript - withRouter type-sjekkfeil som dekoratør av react-router

Når jeg bruker withRouter som en dekoratør for en komponent, som

@withRouter
@observer
// observer is mobx decorator
export default class UserInfo extends React.Component<any> {
  render() {
    return (
      <div>1</div>
    )
  }
}

En typekontrollfeil oppstår:

(10,1): Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<any, string | number | symbol>, any>' is not assignable to type 'typeof UserInfo'.    Type 'Component<Pick<any, string | number | symbol>, any, any>' is not assignable to type 'UserInfo'.      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'.

Hvilken type er <div>1</div> er Element, ikke ReactNode? Og jeg fant definisjonen av render-funksjonen som render(): ReactNode. Hvorfor tror Typescript at det er et Element?

Og hvordan fikser man denne feilen?

Jeg prøvde å legge til returtypen til render().

@withRouter
@observer
export default class UserInfo extends React.Component<any> {
  render(): React.ReactNode {
    return (
      <div>1</div>
    )
  }
}

// or
@observer
class UserInfo extends React.Component<any> {
  render(): React.ReactNode {
    return (
      <div>1</div>
    )
  }
}

export default withRouter(UserInfo)

Det fungerer, men det er ikke elegant. Jeg vil bruke withRouter som dekoratør. Hvordan gjøre det.

Svar #1

du kan lese dokumentasjonen. Der står det at:

fordi Klasse-dekoratøren brukes på konstruktøren til klassen og kan brukes til å observere, endre eller erstatte en klassedefinisjon., det betyr at det er forskjell mellom @withRouter ClassComponent {} og withRouter(ClassComponent)