官方reactjs.org网站包含出色的介绍性教程。
教程片段是用 JavaScript 编写的，我正在尝试将它们转换为 TypeScript。
我已经设法使代码正常工作，但对使用接口(interface)有疑问。
onClick 回调的正确“函数签名”应该是什么。
有没有办法用显式函数签名替换 IProps_Square 接口(interface)中的“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')
);
最佳答案
带有 props 的接口(interface)应该是
interface IProps_Square {
message: string;
onClick: React.MouseEventHandler<HTMLButtonElement>;
}
另请注意，如果您使用分号，则界面项分隔符是分号，而不是逗号。
关于javascript - ReactJS 中 onClick 事件的 TypeScript 接口(interface)签名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54433183/