Reactjs 用TypeScript反应道具类型-如何拥有函数类型？

有没有一种最佳实践可以将函数类型与React prop类型和TypeScript结合使用

我以为这会奏效，但事实上它错了：

type Props = {
  onClick: Function
};

const Submit = ({ onClick }: Props) => {
  return (
    <button type="button" onClick={onClick}>
      click me
    </button>
  );

类型道具={
onClick：函数
};
const Submit=（{onClick}:Props）=>{
返回(
点击我
);

按照这个思路，我让它工作了，但它似乎不必要地冗长：

类型道具={
onClick:（…args:any[]）=>any；
};
const Submit=（{onClick}:Props）=>{
返回(
点击我
);

您可以这样简单地编写，这样可以防止出现任何错误，而且更能说明问题。特别是对于自定义函数：

界面道具{ onClick：（e：事件）=>void； }

这将告诉调用组件，onClick将期望什么以及参数是什么

希望这有帮助。快乐编码。

关于

功能和最佳实践
实际上，它的类型安全性不足，是所有函数的超级类型。您最好将其替换为-请参阅下面的“解决方案”部分

在上面的示例中，
Function
不可分配给更窄的
onClick
函数类型，这会导致当前的错误（）

除此之外，以下是关于
函数的说明：

这是一个非类型化函数调用，通常最好避免，因为任何返回类型都不安全。如果需要接受任意函数但不打算调用它，则类型
（）=>void
通常更安全

已放弃带有规则的
功能
，具有默认配置（另请参见）：

函数
类型接受任何类似函数的值。它在调用函数时不提供类型安全性，这可能是常见的错误源。
如果希望函数接受某些参数，则应显式定义函数形状

更好的解决方案
React已随附处理

例如，
单击
（）：
类型道具={
onClick:React.MouseEventHandler
};
const Submit=（{onClick}:Props）=>单击

一种更通用的替代方法是使用以下方法：
type Props={
onClick：（事件：React.MouseEvent）=>void
};

void
比
any
更具限制性。在回调中不可能意外返回值，这在
any
中是可能的

总之，我们接受TypeScript的输入功能，而不是使用
函数
或
任何
。
现在已知该参数为
MouseEvent
，返回类型为
void
，将其标识为回调

相关的
OP特别询问了React回调，而链接的帖子一般都是关于回调类型的。因此，我投票重新讨论这个问题。
type Props = {
  onClick: (...args: any[]) => any;
};

const Submit = ({ onClick }: Props) => {
  return (
    <button type="button" onClick={onClick}>
      click me
    </button>
  );

type Props = {
  onClick: React.MouseEventHandler<HTMLButtonElement>
};

const Submit = ({ onClick }: Props) => <button onClick={onClick}> click </button>

type Props = { 
  onClick: (event: React.MouseEvent<HTMLElement>) => void
};