为什么打字稿会抛出 Binding element 'target' 隐式具有 'any' type.ts(7031)？

Question

我正在尝试获取此函数参数的正确类型

  const handleInputChange = ({ target }) => {
    setFormValues({
      ...formValues,
      [target.name]: target.value,
    });
  };

它向我抛出一个错误，但没有使应用程序崩溃，但我知道这不是一个好的做法。

为了提供更多上下文，所有正在更改的字段都是字符串。

Answer 1

它告诉你这一点是因为你还没有告诉它参数的类型是什么。

\n

您需要告诉它类型是什么。有几种方法：

\n

\n

1. 输入您要为其分配函数的常量；或者

   \n
\n

2. 直接输入参数

   \n
\n

\n

输入您要为其分配函数的常量

\n

您可以使用ChangeEventHandler通用类型来做到这一点，将元素的类型作为类型参数：

\n

import { ChangeEventHandler } from "react";\n\n// ...\n\nconst onChange: ChangeEventHandler<HTMLInputElement> = ({currentTarget}) => {\n// type \xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n    console.log(`${currentTarget.name} => ${currentTarget.value}`);\n};\n

\n

直接输入参数

\n

该参数是一个具有currentTarget属性的事件对象，因此如果（例如）在 上使用该参数HTMLInputElement，则可以使用类型{ currentTarget: HTMLInputElement }：

\n

const handleInputChange = ({ currentTarget }: { currentTarget: HTMLInputElement }) => {\n// type \xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n    // ...\n};\n

\n

或者你可以使用ChangeEvent<T>：

\n

import { ChangeEvent } from "react";\n\n// ...\n\nconst handleInputChange = ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n// type \xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n    // ...\n};\n

\n\n

注意我使用currentTarget而不是target. input对于元素来说通常并不重要（target如果currentTarget处理程序位于input，而不是其父/祖先上，则总是相同的），但对于button元素和其他一些元素来说却很重要（因为target可能是后代元素）。如果您正在处理change父/祖先元素而不是直接处理，这一点很重要input。

\n