Annotate a binding type to callback functions

[challet]

What: Adding typescript annotations about some functions binding

Why: Because of the eslint rule @typescript-eslint/unbound-method being triggered when using the css callback function :

<ClassNames>
      {({ css }) => {
        …
      })}
</ClassNames>

error Avoid referencing unbound methods which may cause unintentional scoping of this.
If your function does not access this, you can annotate it with this: void, or consider using an arrow function instead

How:

• css is typesciptly bound to a ClassNamesContent interface while it is actually a void-bounded function
• this bounding is then explicitly declared

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4bdee50

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[Andarist]

Class method functions don't preserve the class scope when passed as standalone variables ("unbound"). If your function does not access this, you can annotate it with this: void, or consider using an arrow function instead.

I think you should consider the other option (using an arrow function). I don't understand why ESLint would report issues about this on regular arrow functions and I don't feel like including this change to satisfy an odd linting quirk (if there is one).

[challet]

I think the advice part about using an arrow function is about the imported function … which is an arrow function already

I don't understand why ESLint would report issues about this on regular arrow functions

To my understanding, that's because its type is declared in an interface and used as such with let css: ClassNamesContent['css'] and so seen as a "Class method function", shadowing the original "arrow function type"

[Andarist]

You'd have to set up a repository with the error reproduced there so I could take a look at it.