使用 TypeScript 响应 prop 类型 - 如何拥有函数类型？

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

关于Function和最佳实践

Function在实践中没有足够的类型安全性，是所有函数的超类型。 您最好用函数类型替换它 - 请参阅下面的“解决方案”部分。

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

除了提到的问题，这里是TypeScript 文档对Function ：

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

typescript-eslint已经丢弃了带有ban-types规则的Function ，使用默认配置发出以下消息（另请参见此处）：

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

更好的解决方案

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

例如click （ 游乐场）：

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

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

更通用的替代方法是使用函数类型，如下所示：

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

void比any更具限制性。 没有机会在回调中意外返回一个值，这对于any是可能的。

总之，我们采用 TypeScript 的打字功能，而不是使用Function或any . 现在已知参数是MouseEvent和返回类型void ，将其标识为回调。

有关的

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

Answer 2

你可以简单地这样写，这样可以防止任何事情并且更有说服力。 特别是对于自定义函数：

界面道具 { onClick: (e: Event) => void; }

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

希望这可以帮助。 快乐编码。