Javascript ReactJS中onClick事件的TypeScript接口签名_Javascript_Reactjs_Typescript

Javascript ReactJS中onClick事件的TypeScript接口签名

javascript reactjs typescript

Javascript ReactJS中onClick事件的TypeScript接口签名,javascript,reactjs,typescript,Javascript,Reactjs,Typescript,该官方网站包含一个优秀的入门教程教程片段是用JavaScript编写的，我正在尝试将它们转换为TypeScript 我已经设法使代码正常工作，但对使用接口有疑问 onClick回调的正确“函数签名”应该是什么有没有办法用显式函数签名替换IProps\u Square界面中的“any”关键字？任何帮助或建议都将不胜感激，非常感谢Russell index.html <!DOCTYPE html> <html lang="en"> <body> <di

该官方网站包含一个优秀的入门教程

教程片段是用JavaScript编写的，我正在尝试将它们转换为TypeScript

我已经设法使代码正常工作，但对使用接口有疑问

onClick回调的正确“函数签名”应该是什么

有没有办法用显式函数签名替换IProps\u Square界面中的“any”关键字？

任何帮助或建议都将不胜感激，非常感谢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')   
);

import*as React from'React'；
从“react dom”导入*作为react dom；
接口IProps_Square{
消息：string，
onClick：任何，
}
类方形扩展反应组件{
render（）{
返回(
{this.props.message}
);
}
}
类游戏扩展了React.Component{
render（）{
返回(
警报（'hello'）}
/>
);
}
}
ReactDOM.render(
, 
document.getElementById（'reactjs-tutorial'）
);

有没有办法用显式函数签名替换IProps_Square接口中的“any”关键字

我只想

（）=>void

，也就是说，一个不带参数的函数，你不在乎它是否返回任何东西

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

import*as React from'React'；
从“react dom”导入*作为react dom；
接口IProps_Square{
消息：string，
onClick:（）=>void，
}
类方形扩展反应组件{
render（）{
返回(
{this.props.message}
);
}
}
类游戏扩展了React.Component{
render（）{
返回(
警报（'hello'）}
/>
);
}
}
ReactDOM.render(
, 
document.getElementById（'reactjs-tutorial'）
);

与道具的接口应为

接口IProps\u Square{
消息：字符串；
onClick:React.MouseEventHandler；
}

还请注意，如果使用分号，则接口项分隔符是分号，而不是逗号。

如果他需要事件作为参数，他也可以将其声明为

onClick（event:React.MouseEvent）：void

非常感谢-这也很有效--接口IProps_Square{onClick（event:React.MouseEvent）：void，}--onClick={（event）=>alert（event.target）}如果使用WebStorm，可以按住Ctrl键单击

onClick

属性以查看其类型。还可以使用一些无意义的内容替换

this.props.onClick

，例如

onClick={42}

。然后，当TypeScript拒绝您的程序时，它将在错误消息中包含正确的类型。