TypeScript interface signature for the onClick event in ReactJS

The official reactjs.org website contains an excellent introductory tutorial.

The tutorial snippets are written in JavaScript and I am trying to convert these to TypeScript.

I have managed to get the code working but have a question about using interfaces.

What should the correct "function signature" be for the onClick callback.

Is there a way to replace the 'any' keyword in the IProps_Square interface with an explicit function signature ?

Any help or suggestions would be really appreciated, many thanks Russell

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<div id="reactjs-tutorial"></div>
</body>
</html>

index.tsx

import * as React from 'react';   
import * as ReactDOM from 'react-dom'; 

interface IProps_Square {
  message: string,
  onClick: any,
}

class Square extends React.Component < IProps_Square > {
   render() {  
     return (
       <button onClick={this.props.onClick}>
         {this.props.message}
       </button>
     );
   }
}

class Game extends React.Component {
  render() {
    return (
      <Square
         message = { 'click this' }
         onClick = { () => alert('hello') }
      />
    );
  }
}

ReactDOM.render(
  <Game />, 
  document.getElementById('reactjs-tutorial')   
);

Solution 1:

The interface with props should be

interface IProps_Square {
  message: string;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

Notice also that if you use semicolons, the interface items separator is a semicolon, not a comma.

Solution 2:

Is there a way to replace the 'any' keyword in the IProps_Square interface with an explicit function signature

I would just () => void i.e. a function that takes no arguments and you don't care if it returns anything.

import * as React from 'react';   
import * as ReactDOM from 'react-dom'; 

interface IProps_Square {
  message: string,
  onClick: () => void,
}

class Square extends React.Component < IProps_Square > {
   render() {  
     return (
       <button onClick={this.props.onClick}>
         {this.props.message}
       </button>
     );
   }
}

class Game extends React.Component {
  render() {
    return (
      <Square
         message = { 'click this' }
         onClick = { () => alert('hello') }
      />
    );
  }
}

ReactDOM.render(
  <Game />, 
  document.getElementById('reactjs-tutorial')   
);

However if you need the parameter the proper type for it is React.MouseEvent<HTMLElement>, so:

interface IProps_Square {
  message: string,
  onClick: (e: React.MouseEvent<HTMLElement>) => void,
}

TypeScript interface signature for the onClick event in ReactJS

Solution 1:

Solution 2:

Related

Recent Posts