El sitio web oficial de reactjs.org contiene un excelente tutorial introductorio.
Los fragmentos del tutorial están escritos en JavaScript y estoy tratando de convertirlos a TypeScript.
Logré que el código funcionara, pero tengo una pregunta sobre el uso de interfaces.
¿Cuál debería ser la "firma de función" correcta para la devolución de llamada onClick?
¿Hay alguna manera de reemplazar la palabra clave 'cualquiera' en la interfaz IProps_Square con una firma de función explícita?
Cualquier ayuda o sugerencia sería muy apreciada, muchas gracias Russell
índice.html
<!DOCTYPE html> <html lang="en"> <body> <div id="reactjs-tutorial"></div> </body> </html>índice.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') );La interfaz con accesorios debe ser
interface IProps_Square { message: string; onClick: React.MouseEventHandler<HTMLButtonElement>; }Tenga en cuenta también que si usa punto y coma, el separador de elementos de la interfaz es un punto y coma, no una coma.
¿Hay alguna manera de reemplazar la palabra clave 'cualquiera' en la interfaz IProps_Square con una firma de función explícita?
Simplemente () => void es decir, una función que no toma argumentos y no te importa si devuelve algo.
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') ); Sin embargo, si necesita el parámetro, el tipo adecuado para él es React.MouseEvent<HTMLElement> , entonces:
interface IProps_Square { message: string, onClick: (e: React.MouseEvent<HTMLElement>) => void, }Excepto React.MouseEvent que puedes usar
type IProps_Square = { onClick: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"]; }o
type IProps_Square = { onClick: JSX.IntrinsicElements["button"]["onClick"]; }