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


javascript reactjs typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

App criado para praticar ReactJS + TypeScript

App criado para praticar ReactJS + TypeScript This project was bootstrapped with Create React App.

TypeScript VS Flow: Type Checking Front End JavaScript

TypeScript VS Flow: Syntax, IDE support, framework support, and roadmaps.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Por qué DEBES aprender TYPESCRIPT (Typescript vs Javascript)

Habéis oido hablar de TypeScript? Porqué se está utilizando y qué aporta que no tenga JavaScript? Se puede utilizar con Angular o con React? En el backend? En éste vídeo os explico porqué utilizo TypeScript y cómo instalarlo!

Builder Pattern in JavaScript/TypeScript

This article is not just about Builder Pattern in JS/TS, I will be explaining my thought process behind it and see if you can relate yourself to this. I believe everybody has a unique way of solving problems, hope you get something to learn from it.