参数 'e' 隐含了一个 'any' 类型 React TypeScript答案

【问题标题】：Parameter 'e' implicitly has an 'any' type React TypeScript参数 'e' 隐含了一个 'any' 类型 React TypeScript
【发布时间】：2020-07-30 14:34:21
【问题描述】：

我正在尝试在 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”隐含地有一个“任何”类型的 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 });
  };

【问题讨论】：

您收到警告还是错误？我认为this 会有所帮助
你必须在continue = e => ... 中为e 指定一个参数类型请告知——continue 被传递给什么属性？
@GalAbra 这是一个错误
(e: React.ChangeEvent<HTMLInputElement>) =>，类似的东西应该可以解决它。

标签： reactjs typescript react-props tsx

【解决方案1】：

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

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

如果您不为变量和函数参数分配类型，Typescript 会尖叫。

【讨论】：

codesandbox.io/s/ex-5ev2f 你能看看这个 tsx 文件并根据问题中的道具告诉 e 是什么类型吗？我不知道给它分配什么

【解决方案2】：

在这种情况下，e 是某种事件。如果您不知道什么是“任何类型”，则默认为“任何”，例如

handleChange = input => (e:any) => {
    this.setState({ [input]: e.target.value });
  };

所以在短期内使用any。如果您想确切地知道它可能是输入事件的类型，您可能会发现 Typescript input onchange event.target.value 很有用

【讨论】：

当我工作时，如果我不知道它是什么类型，我会将它设置为“任何”，直到我能够真正知道类型是什么——正如我在上面所说的那样短期'

【解决方案3】：

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

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

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

我们也可以在 React 的 types 中查看：

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

所以，像

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

...可能对你有用。

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

【讨论】：

【解决方案4】：

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

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

TypeScript 总是试图找出在您的应用程序中流动的不同类型的值，而这正是类型推断系统所做的。

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

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

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

类型推断只有在我们直接内联定义回调函数时才定义在 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 代码中还有其他事件，例如悬停或拖动，您可能也需要注释。只是需要注意的事情。

【讨论】：