Type InferableComponentEnhancerWithProps is missing the following properties from type Component<OwnProps>

Viewed 267

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
1 Answers

It's almost correct, but you forgot to apply connect(mapStateToProps, mapDispatchToProps) to your ChatAppComponent. This should work:

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

The type of ChatApp will be inferred correctly, so you don't need a type signature. If you do want the signature, you'll need React.FunctionComponent<OwnProps> though, as the connected component is not a class. Alternatively, you could also use the more general React.ComponentType<OwnProps> which works for both classes and function components.

Related