Menu
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')
);
214
To type the onClick event of an element in React, set its type to React. MouseEvent<HTMLElement> . The MouseEvent interface is used to type onClick events in React.
To add a click event listener to a button in TypeScript: Select the button element. Use the addEventListener() method to add a click event listener to it. The method will invoke a function every time the button is clicked.
React events are written in camelCase syntax: onClick instead of onclick . React event handlers are written inside curly braces: onClick={shoot} instead of onClick="shoot()" .
Example: Pass a Button Value to an Inline Function Notice the value e that's returned from the onClick event handler: import React from 'react'; function App() { return ( <button value="hello!" onClick={e => alert(e. target. value)}> Click me!
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.
195
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,
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
