reactjs - Type InferableComponentEnhancerWithProps está omitiendo las siguientes propiedades del tipo Component<OwnProps>

Estoy siguiendo este tutorial para construir una aplicación de chat con React y Redux en Typescript, pero estoy obteniendo un error al exportar mi componente conectado:

Type 'InferableComponentEnhancerWithProps<ConnectedState & ConnectedDispatch, OwnProps>' 
is missing the following properties from type 'Component<OwnProps, {}, any>': 
context, setState, forceUpdate, render, and 3 more.

Este es el código del tutorial. ¿En qué sentido debería actualizarlo para deshacerme de este error y poder usar el componente normalmente?

import * as React from 'react'
import * as redux from 'redux'
import { connect } from 'react-redux'

import { Message as MessageModel, UserMessage} from 'rcserver/src/models'
import { ChatState } from '../state'
import { Action } from '../actions'

import { Messages } from './Messages'
import { ChatInput } from './ChatInput'


interface OwnProps {
  socket: WebSocket,
  username: string
}

interface ConnectedState {
  messages: MessageModel[]
}

interface ConnectedDispatch {}
interface OwnProps {}


const mapStateToProps = (state: ChatState, ownProps: OwnProps): ConnectedState => ({
  messages: state.messages
})

const mapDispatchToProps = (dispatch: redux.Dispatch<Action>): ConnectedDispatch => ({})

export class ChatAppComponent extends React.Component<ConnectedState & ConnectedDispatch & OwnProps> {

  sendHandler = (message: string) => {
    const messageObject: MessageModel = {
      name: this.props.username,
      message: message
    }
    this.props.socket.send(JSON.stringify(messageObject))
  }

  render() {
    return (
      <div className="container">
        <h3>React Chat App</h3>
        <Messages username={this.props.username} messages={this.props.messages} />
        <ChatInput onSend={this.sendHandler} />
      </div>
    )
  }

}
 
export const ChatApp: React.Component<OwnProps> = connect(mapStateToProps, mapDispatchToProps)
//This last line is the one triggering the error

Respuesta #1

Está casi correcto, pero olvidaste aplicar connect(mapStateToProps, mapDispatchToProps) a tu ChatAppComponent. Esto debería funcionar:

export const ChatApp = connect(mapStateToProps, mapDispatchToProps)(ChatAppComponent)

El tipo de ChatApp se inferirá correctamente, por lo que no necesitas una firma de tipo. Si deseas la firma, necesitarás React.FunctionComponent<OwnProps>, ya que el componente conectado no es una clase. Alternativamente, también podrías usar el más general React.ComponentType<OwnProps>, que funciona tanto para clases como para componentes de función.