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

Question

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

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

type Props = {
  onClick: Function
};

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

按照这个思路，我让它工作了，但它似乎不必要地冗长：https://github.com/Microsoft/TypeScript/issues/20007

type Props = {
  onClick: (...args: any[]) => any;
};

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

Answer 1

你可以简单地这样写，这样可以避免任何错误，更能说明问题。特别是对于自定义函数：

接口道具{onClick:（e:Event）=

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

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

Answer 2

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

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

除上述问题外，以下是TypeScript文档关于函数的说明：

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

typesccript eslint已经放弃了Function与ban-type规则，发出以下消息与默认配置（请参阅此处）：

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

React已经内置了事件处理程序类型来处理常见事件。

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

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

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

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

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

TypeScript：如何定义方法参数中使用的函数回调的类型（作为任何函数类型，而不是通用的任何函数类型）