I'm following this tutorial to build a chat app with React and Redux on Typescript, but I'm getting an error when exporting my connected component:
Type 'InferableComponentEnhancerWithProps<ConnectedState & ConnectedDispatch, OwnProps>'
is missing the following properties from type 'Component<OwnProps, {}, any>':
context, setState, forceUpdate, render, and 3 more.
This is the code from the tutorial. In which sense should I update it to get rid of this error and be able to use the component normally.
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