React counter component comparing JavaScript and TypeScript.

Counter.jsx

import React from 'react';

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  handleIncrement = () => {
    this.setState(state => ({
      counter: state.counter + 1,
    }));
  };

  handleDecrement = () => {
    this.setState(state => ({
      counter: state.counter - 1,
    }));
  };

  render() {
    const { title } = this.props;
    const { counter } = this.state;
    return (
      <div>
        <h1>{title}</h1>
        <p>Clicked: {counter} times</p>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

export default Counter;

Counter.tsx

import * as React from 'react';

interface IProps {
  readonly title: string;
}

interface IState {
  readonly counter: number;
}

class Counter extends React.Component<IProps, IState> {
  public readonly state = {
    counter: 0,
  };

  private handleIncrement = () => {
    this.setState(state => ({
      counter: state.counter + 1,
    }));
  };

  private handleDecrement = () => {
    this.setState(state => ({
      counter: state.counter - 1,
    }));
  };

  public render() {
    const { title } = this.props;
    const { counter } = this.state;
    return (
      <div>
        <h1>{title}</h1>
        <p>Clicked: {counter} times</p>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

export default Counter;