Question

是否存在使用TypeScript的React prop类型具有函数类型的最佳实践？

我认为这是可行的，但实际上它是错误的：

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）=>无效； }

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

希望这会有所帮助。编码愉快。

Answer 2

Function非常通用，不提供任何（强）类型安全性。在您的链接中，一位贡献者甚至说，调用函数是不安全的。相反，像这样包含TypeScript的键入功能更有意义：

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

现在，您知道参数为MouseEvent，返回类型为void，将其标记为回调。 void是any类型的限制性更强的子类型。因此，您不会碰巧通过回调返回值，该值在any类型下有效（您可以从字面上返回任何内容）。

就最佳实践而言，tslint对Function类型的抱怨是正确的：

请勿将“函数”用作类型。避免使用Function类型。首选特定的函数类型，例如() => void。tslint（ban-types）

您可以查看此answer或docs以获得更多功能示例。

PS：点击事件处理程序也有一种预定义的类型：

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

希望，会有所帮助。

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

2 个答案: