Theo's Typesafe Cult•2y ago

typescript-eslint/no-misused-promises: how to handle Promise<void> in event handlers?

<button onClick={someAsyncFetchFunction} />Click</button> This ESLint rule didn't squash the warning: https://github.com/typescript-eslint/typescript-eslint/pull/4623

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksVoidReturn": {
        "arguments": false
      }
    }
  ]
}

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksVoidReturn": {
        "arguments": false
      }
    }
  ]
}

GitHub

feat(eslint-plugin): [no-misused-promises] add granular options wit...

PR Checklist Addresses an existing issue: fixes #4619 That issue was marked as accepting prs Steps in CONTRIBUTING.md were taken Overview Allows user configurations to provide an object contai...

2 Replies

aether•2y ago

Perfect timing, just solved this exact issue yesterday. Here's how I did it. Basically we only need to add a void identifier inside the onClick, so your function would be something similar to onClick={() => void someAsyncFunctionReturningPromise()} Give it a try and hope that helps!

mcgrealifeOP•2y ago

Brilliant @aether that worked – much appreciated!

Gaming

Programming

typescript-eslint/no-misused-promises: how to handle Promise<void> in event handlers?

Did you find this page helpful?