参数 'e' 隐式具有 'any' 类型 React TypeScript

Question

我正在尝试在 React TypeScript 文件中实现这一点：

export class MainInfo extends Component<IProps>{
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values1, handleChange } = this.props
    return (
      <div>
        <Formik
          validateOnChange={true}
          validationSchema={validationSchema}
          initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }}
          onSubmit={(data) => {
            console.log(data)
          }}

但是我收到一个参数 'e' 隐含一个 'any' 类型的 React TypeScript 错误。我应该如何解决这个问题？

编辑：我在另一个文件中有这些，我在这里使用它们作为道具

nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
  };

  // Handle fields change
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

Answer 1

在编写 TypeScript 时，您应该参考库的源代码或文档以了解它的类型是什么

例如，在 Formik 中types.tsx，我们看到

handleChange(e: React.ChangeEvent<any>): void;

我们还可以查看 React 的类型来查看：

interface ChangeEvent<T = Element> extends SyntheticEvent<T>

所以，像

handleChange = input => (e: React.ChangeEvent<HTMLInputElement>) => {
  this.setState({ [input]: e.target.value });
};

...可能对你有用。

此外，如果您的 IDE 支持 TypeScript，那将有所帮助。

Answer 2

你必须给出e一个类型。例如：

continue = (e: React.FormEvent<HTMLInputElement>) => {
  e.preventDefault()
}

如果你不给变量和函数参数分配类型，Typescript 就会对你大喊大叫。

Answer 3

有趣的是，如果您正在编写内联事件处理程序，您将不会看到此错误，但是为什么会在这种情况下看到它呢？

您看到该错误消息的原因是 TypeScript 中的类型推断系统及其工作原理。

TypeScript 总是试图找出应用程序中流动的不同类型的值，这就是类型推断系统的作用。

我用截图来演示一下。在下面的屏幕截图中，我将鼠标悬停在上面onChange，您会注意到 TypeScript 100% 知道该onChangeprop 的真正含义，它知道它是一个 prop，它知道我需要为其提供某种回调函数。它说，如果我决定向 提供该函数onChange，它将调用第一个参数event，其类型将是React.ChangeEvent<HTMLInputElement>：

如果我将鼠标悬停e在内联上，请注意我得到了完全相同的类型：

但是，如果我提前定义函数，则不会应用类型推断系统。即使我提前定义函数并将其传递到onChangeprop 中，也不会应用类型推断。

当我们直接内联定义回调函数时，类型推断仅在 JSX 内部定义。

那么如何解决这个问题呢？我们如何onChange提前在示例中定义并注释事件对象的类型？

好吧，我可以将鼠标悬停onChange在上面的屏幕截图中，突出显示并复制事件类型，React.ChangeEvent<HTMLInputElement>然后在后面添加冒号event并将该类型粘贴进去。

在我的例子中它将是：

const EventComponent: React.FC = () => {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event);
  };

   return (
     <div>
       <input onChange={onChange} />
     </div>
   );
};

这意味着，要解决您的问题，它看起来像这样：

export class MainInfo extends Component<IProps>{
  continue = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    this.props.nextStep();
  };

注意到事件类型了吗ChangeEvent？请注意，React 代码中还有其他事件，例如您可能还需要注释的悬停或拖动。只是需要注意一些事情。