TypeScript interface signature for the onClick event in ReactJS

TypeScript interface signature for the onClick event in ReactJS

The official&nbsp;<a href="https://reactjs.org/tutorial/tutorial.html" target="_blank">reactjs.org</a>&nbsp;website contains an excellent introductory tutorial.

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')
);


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

TypeScript for JavaScript Developers

TypeScript is an object-oriented programming language developed and maintained by the Microsoft Corporation. It is a superset of JavaScript and contains all of its elements. TypeScript is a compiled language. You write TypeScript and it compiles to JavaScript. Essentially, you’re writing JavaScript, but with a type system. JavaScript developers should have a seamless transition because the languages are the same