@typescript-eslint/unbound-method triggered when destructuring function from arg

[Stadly]

Describe the bug

When destructuring a function out of a function argument, for example like this:

// `resolve` is a function that is destructured out of the function argument
async function handle({ event, resolve }) {
  // ...
}

ESLint yells at me:

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  @typescript-eslint/unbound-method

Destructuing the function argument is very common, and is the way it's done in both the Docs and Tutorial for the handle hook.

I don't think resolve uses this, so I think the issue would be solved by declaring Handle like this (using arrow function):

export type Handle = (input: {
  event: RequestEvent;
  resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>;

or this (annotating with this: void):

export type Handle = (input: {
  event: RequestEvent;
  resolve(this: void, event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}) => MaybePromise<Response>;

instead of this:

export type Handle = (input: {
  event: RequestEvent;
  resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}) => MaybePromise<Response>;

Note: The same issue applies to some other functions. At least parent in LayoutLoad and PageLoad comes to mind.

Reproduction

Set up SvelteKit with ESLint and @typescript-eslint/recommended-type-checked.

Set up a handle hook:

// src/hooks.server.js
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
  return await resolve(event);
}

Logs

No response

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 Intel(R) Xeon(R) W-11955M CPU @ 2.60GHz
    Memory: 4.39 GB / 15.23 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.17.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
  npmPackages:
    svelte: ^4.2.19 => 4.2.19 

### Severity

annoyance

[Stadly]

Fixed in sveltejs/kit#12955

[gyzerok]

@Stadly would you mind sharing your eslint config? I've tried to configure svelte with typed eslint rules and it seems to work when doing npm run lint, but I get no assistance in IDE inside .svelte files for errors related to those rules.

[Stadly]

Sure, here is my .eslintrc.cjs file:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
    "plugin:svelte/prettier",
    "plugin:svelte/recommended",
    "prettier",
  ],
  ignorePatterns: ["/build/"],
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser",
        project: true,
        tsconfigRootDir: __dirname,
      },
      rules: {
        "@typescript-eslint/no-unused-vars": [
          "error",
          {
            // These type names have special meanings in Svelte components and should not be reported as unused.
            // Ref: https://github.com/sveltejs/eslint-plugin-svelte/issues/348
            varsIgnorePattern: "^\\$\\$(Props|Events|Slots|Generic)$",
          },
        ],
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    extraFileExtensions: [".svelte"],
    project: ["tsconfig.json", "tsconfig.eslint.json"],
    tsconfigRootDir: __dirname,
  },
  plugins: ["@typescript-eslint"],
  rules: {
    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
    eqeqeq: "error",
  },
};