关于react.js:React报错之Parameter-event-implicitly-has-an-any-type

注释从这开始~

总览

当咱们不在事件处理函数中为事件申明类型时，会产生”Parameter ‘event’ implicitly has an ‘any’ type”谬误。为了解决该谬误，显示地为event参数申明类型。比如说，在input元素上，将解决change事件申明类型为React.ChangeEvent<HTMLInputElement> 。

这里有个示例用来展现谬误是如何产生的。

// App.tsx

function App() {
  // ⛔️ Parameter 'event' implicitly has an 'any' type.ts(7006)
  const handleChange = event => {
    console.log(event.target.value);
    console.log(event.target);
  };

  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}

export default App;

示例中的问题在于，咱们没有显示地为事件处理函数的event参数申明类型。

设置类型

为了解决该谬误，咱们必须依据事件类型为参数设置一个类型。

// App.tsx

function App() {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
    console.log(event.target);
  };

  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}

export default App;

咱们将事件的类型申明为React.ChangeEvent<HTMLInputElement> ，因为咱们正在为input元素申明一个onChange事件。

你要找出事件的类型，最简略的办法是将事件处理器内联编写，并将鼠标悬浮在函数的event参数上。

// App.tsx

function App() {
  // 👇️ event is written inline
  return (
    <div>
      <input
        onChange={e => console.log(e.target.value)}
        type="text"
        id="message"
      />
    </div>
  );
}

export default App;

截图显示，当咱们将鼠标悬浮在内联事件处理器的e变量上时，咱们失去了事件的正确类型。

这种办法实用于所有的事件处理器，一旦你晓得了事件的正确类型，你就能够提取处理函数并正确对其类型申明。

上面是一个例子，阐明如何用同样的办法确定onClick事件的类型。

// App.tsx

function App() {
  // 👇️ event is written inline
  return (
    <div>
      <button onClick={e => console.log(e)}>Click</button>
    </div>
  );
}

export default App;

咱们将鼠标悬浮在内联的e参数上，并发现其类型是什么。当初咱们可能将事件处理程序提取到一个函数中。

// App.tsx

function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(e.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

export default App;

当初事件的类型正确了。咱们不会失去”Parameter ‘event’ implicitly has an ‘any’ type”谬误。

逃生舱any

如果你不想正确地为事件申明类型，你只是想解脱谬误，那么能够将事件类型设置为any。

// App.tsx

function App() {
  // 👇️ explicitly set type to any
  const handleClick = (e: any) => {
    console.log(e.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

export default App;

在TypeScript中，any类型能够无效地敞开类型查看。因而，咱们当初能够在event上拜访任何属性。

这样就解决了谬误，因为当初事件被显式地设置为any类型，而之前是隐式地设置为any类型。

然而，一般来说咱们最好防止应用any类型。

确定类型

上面是一个如何确定表form元素上的onSubmit事件类型的例子。

function App() {

  // 👇️ event written inline
  return (
    <div>
      <form onSubmit={e => console.log(e)}></form>
    </div>
  );
}

export default App;

咱们将鼠标悬浮在内联的e参数上，发现提交事件应该类型申明为React.FormEvent<HTMLFormElement>。

当初咱们晓得了正确的类型，咱们就能够提取事件处理函数。

function App() {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(event.target);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default App;

这种办法实用于所有的事件处理器，一旦你晓得了事件的正确类型，你就能够提取你的处理函数并正确地申明类型。

TypeScript总是可能推断出内联事件处理器的事件类型，因为你曾经装置了React的类型定义文件。

# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom

# ----------------------------------------------

# 👇️ with YARN
yarn add @types/react @types/react-dom --dev