reactjs - Type InferableComponentEnhancerWithProps saknar följande egenskaper från typ Component<OwnProps>

Jag följer den här handledningen för att bygga en chattapp med React och Redux på Typescript, men jag får ett fel när jag exporterar min anslutna komponent:

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

Detta är koden från handledningen. På vilket sätt bör jag uppdatera den för att bli av med detta fel och kunna använda komponenten normalt.

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

Svar #1

Det är nästan korrekt, men du glömde att använda connect(mapStateToProps, mapDispatchToProps) på din ChatAppComponent. Detta borde fungera:

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

Typen av ChatApp kommer att härledas korrekt, så du behöver inte en typsignatur. Om du vill ha signaturen, kommer du dock att behöva React.FunctionComponent<OwnProps>, eftersom den anslutna komponenten inte är en klass. Alternativt kan du också använda den mer generella React.ComponentType<OwnProps> som fungerar för både klasser och funktionskomponenter.