ReactJS 中 onClick 事件的 TypeScript 接口签名答案

【问题标题】：TypeScript interface signature for the onClick event in ReactJSReactJS 中 onClick 事件的 TypeScript 接口签名
【发布时间】：2019-06-23 07:07:21
【问题描述】：

reactjs.org 官方网站包含一个优秀的入门教程。

教程 sn-ps 是用 JavaScript 编写的，我正在尝试将它们转换为 TypeScript。

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

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

有没有办法将 IProps_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')   
);

【问题讨论】：

如果你使用WebStorm，你可以按住Ctrl键点击onClick属性来查看它的类型。
你也可以用一些废话代替this.props.onClick，例如onClick={42}。然后，当 TypeScript 拒绝您的程序时，它会在其错误消息中包含正确的类型。

标签： javascript reactjs typescript

【解决方案1】：

带有道具的接口应该是

interface IProps_Square {
  message: string;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

还要注意，如果您使用分号，界面项目分隔符是分号，而不是逗号。

【讨论】：

【解决方案2】：

有没有办法用显式函数签名替换 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')   
);

但是，如果您需要参数的正确类型是React.MouseEvent<HTMLElement>，那么：

interface IProps_Square {
  message: string,
  onClick: (e: React.MouseEvent<HTMLElement>) => void,
}

【讨论】：

如果他需要事件作为参数，他也可以将其声明为onClick(event: React.MouseEvent<HTMLElement>):void
这条评论应该是一个答案。