title: TypeScript interface signature for the onClick event in ReactJS
body: <p>The official <a href="https://reactjs.org/tutorial/tutorial.html" rel="noreferrer">reactjs.org</a> website contains an excellent introductory tutorial.</p>
  
  <p>The tutorial snippets are written in JavaScript and I am trying to convert these to TypeScript.</p>
  
  <p>I have managed to get the code working but have a question about using interfaces.</p>
  
  <p>What should the correct "function signature" be for the onClick callback.</p>
  
  <p><strong><em>Is there a way to replace the 'any' keyword in the IProps_Square interface with an explicit function signature ?</em></strong></p>
  
  <p>Any help or suggestions would be really appreciated, many thanks Russell</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;body&gt;
  &lt;div id="reactjs-tutorial"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p><strong>index.tsx</strong></p>
  
  <pre><code>import * as React from 'react';   
  import * as ReactDOM from 'react-dom'; 
  
  interface IProps_Square {
    message: string,
    onClick: any,
  }
  
  class Square extends React.Component &lt; IProps_Square &gt; {
     render() {  
       return (
         &lt;button onClick={this.props.onClick}&gt;
           {this.props.message}
         &lt;/button&gt;
       );
     }
  }
  
  class Game extends React.Component {
    render() {
      return (
        &lt;Square
           message = { 'click this' }
           onClick = { () =&gt; alert('hello') }
        /&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;Game /&gt;, 
    document.getElementById('reactjs-tutorial')   
  ); 
  </code></pre>