[React TypeScript Notes] Using typescript with react #react #typescript

ts_counter-example.tsx

interface CounterState {
  count: number;
}

class App extends Component<{}, CounterState> {
  constructor(props: any) {
    super(props);

    this.state = {
      count: 0
    };

    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
  }

  handleIncrement = () => {
    const { count } = this.state;
    this.setState({
      count: count + 1
    });
  };

  handleDecrement = () => {
    const { count } = this.state;
    this.setState({
      count: count - 1
    });
  };

  render() {
    const { count } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <p>{count}</p>
          <div onClick={this.handleIncrement}>+</div>
          <div onClick={this.handleDecrement}>-</div>
        </header>
      </div>
    );
  }
}

export default App;