Getting "typescript-eslint/unbound-method" using a simple Svelte "on:event" syntax. A false positive?

[frederikhors]

I'm converting to Typescript this code:

<div
  class={"myClass"}
  style={getStyle(someVar)}
  on:animationend={myStore.action}
>

on the line on:animationend={myStore.action} typescript-eslint is complaining about:

Avoid referencing unbound methods which may cause unintentional scoping of this. eslint@typescript-eslint/unbound-method.

What should I do?

Change it to the below? But I like Svelte because of its laconicity!

<!-- I don't like this -->
<div
  class={"myClass"}
  style={getStyle(someVar)}
  on:animationend={(e)=>myStore.action(e)}
>

Can you help me understand, please?

[JounQin]

What is myStore.action? It should be just as same as #102.

[Conduitry]

The rule sounds like it's doing what it's supposed to do. You either need to disable it, or otherwise appease the type checker. This doesn't have anything to do with Svelte.

[frederikhors]

@JounQin myStore.action is:

action(event: AnimationEvent | string) {
  // handle event here
},

@Conduitry some hours ago I found something that had to be "correct" in Svelte types. I don't think I'm asking for much but an indication, among other things useful for all those who will look after me.

[JounQin]

@frederikhors

Use following like sveltejs/svelte#6094

action(this:void, event: AnimationEvent | string) {
  // handle event here
},

Or arrow function

action: (event: AnimationEvent | string) => {
  // handle event here
},
``

[frederikhors]

@JounQin it works! I love you! ❤️❤️❤️

@Conduitry Simply this.

[JounQin]

I think you should ready more carefully about the rule itself before raising issues, bro.

https://github.com/typescript-eslint/typescript-eslint/blob/v4.17.0/packages/eslint-plugin/docs/rules/unbound-method.md#rule-details