OOP + React + typescript how to create components correctly?

Question

OOP

Are there any examples of view components that have been written with typescript using OOP?

Answer 1

I write like this:

import * as React from 'react';
import { connect, DispatchProp } from 'react-redux';
import { connectedPropSelector } from './selectors';

interface OwnProps {
  ownProp: string,
}

interface ConnectedProps {
  connectedProp: string,
}

type Props = OwnProps & ConnectedProps & DispatchProp<any>;

interface State {
  someKey: string,
}

class Example extends React.Component<Props, State> {
  state = {
    someKey: 'someValue',
  };
  
  render() {
    const { ownProp, connectedProp } = this.props;

    return ( /* ... */ );
  }
}

const mapStateToProps = state => ({
  connectedProp: connectedPropSelector(state),
});

export default connect(mapStateToProps)(Example);

Official documentation