使用 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已丢弃 Function该ban-types规则，使用默认配置发出以下消息（另请参见此处）：

该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 的打字功能，而不是使用Functionor any。现在已知参数是MouseEvent和 返回类型void，将其标识为回调。

有关的

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

Answer 2

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

Interface Props { onClick: (e: Event) => void; }

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

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