In the previous post we created React components which we can pass attributes/properties to. As TypeScript aims to make JavaScript type safe we need to ensure the correct types are expected and passed, so for example here’s some code from the TicTacToe tutorial on the React site, but in this example we’re passing an event handler property from the Board component to the Square component, where it’s wired up to the button

interface SquareProperties {value: number, onclick: (ev: React.MouseEvent<HTMLButtonElement>) => void};

class Square extends Component<SquareProperties, {}> {
  render() {
    return (
      <button className="square" onClick={this.props.onclick}>
        {this.props.value}
      </button>
    );
  }
}

class Board extends Component {
  renderSquare(i: number) {
    return <Square value={i} onclick={() => alert('click')}/>;
  }