8000 Why do I get "Avoid referencing unbound methods which may cause unintentional scoping of `this`. eslint@typescript-eslint/unbound-method" in this case? · Issue #102 · sveltejs/eslint-plugin-svelte3 · GitHub
[go: up one dir, main page]
Skip to content

Why do I get "Avoid referencing unbound methods which may cause unintentional scoping of this. eslint@typescript-eslint/unbound-method" in this case? #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
frederikhors opened this issue Mar 17, 2021 · 17 comments · Fixed by sveltejs/svelte#6094
Closed

Why do I get "Avoid referencing unbound methods which may cause unintentional scoping of this. eslint@typescript-eslint/unbound-method" in this case? #102

frederikhors opened this issue Mar 17, 2021 · 17 comments · Fixed by sveltejs/svelte#6094

Comments

@frederikhors
Copy link
Contributor

I'm using Svelte 3, Typescript and this code:

  • loginStore.ts:
import { writable } from "svelte/store";

const store = () => {
  const state = {
    isLoggedIn: false,
  };

  const { subscribe, update } = writable(state); // warning: Avoid referencing unbound methods which may cause unintentional scoping of `this`. eslint@typescript-eslint/unbound-method (2 times)

  const methods = {
    OnInit() {
      this.Login(); // warning: Unsafe member access .Login on an any value. eslint@typescript-eslint/no-unsafe-member-access and another warning: Unsafe call of an any typed value. eslint@typescript-eslint/no-unsafe-call
    },

    Login() {
      if (window.localStorage.isLoggedIn) {
        update(() => {
          state.isLoggedIn = true;
          return state;
        });
      }
    },

    async Logout() {
      await doLogout();
      update(() => {
        state.isLoggedIn = false;
        return state;
      });
    },
  };

  return {
    subscribe,
    ...methods,
  };
};

export default store();

But @typescript-eslint is giving me these errors:

  1. Avoid referencing unbound methods which may cause unintentional scoping of this 2 times on line:

    const { subscribe, update } = writable(state)

  2. Unsafe member access .Login on an any value on line:

    this.Login()

  3. Unsafe call of an any typed value on line:

    this.Login()

How can I fix these warnings?
@JounQin
Copy link
JounQin commented Mar 17, 2021 •
edited
Loading

There is nothing related to this plugin...

And it's expected AFAIK.

For the first one, writable/subscribe/update is a plain function without this used inside, so if you want, we should change the source svelte code from export function writable() to export const writable = () or export function writable (this: never).

For the other warnings, can just add

OnInit(this: typeof methods)

@frederikhors
Copy link
Contributor Author

we should change the source svelte code from export function writable() to export const writable = () or export function writable (this: never)

Do you mean we should change Svelte 3 types?

@frederikhors
Copy link
Contributor Author
frederikhors commented Mar 17, 2021 •
edited
Loading 
OnInit(this: typeof methods)

It doesn't fix the warning.

Can you please elaborate on this?

@JounQin
Copy link
JounQin commented Mar 18, 2021 •
edited
Loading 
OnInit(this: typeof methods)

It doesn't fix the warning.

Can you please elaborate on this?

Sorry about that, actually I don't have the problem.

playground

@JounQin
Copy link
JounQin commented Mar 18, 2021

we should change the source svelte code from export function writable() to export const writable = () or export function writable (this: never)

Do you mean we should change Svelte 3 types?

Yes.

@frederikhors
Copy link
Contributor Author 
OnInit(this: typeof methods)

It doesn't fix the warning.
Can you please elaborate on this?

Sorry about that, actually I don't have the problem.

playground

I cannot see your code there:

image

@JounQin
Copy link
JounQin commented Mar 18, 2021

What's code do you want, the playground is simplified to show what the root cause.

And which version of typescript and @typescript-eslint/eslint-pluin are you using.

@JounQin JounQin mentioned this issue Mar 18, 2021
Merged
4 tasks
@frederikhors
Copy link
Contributor Author

I changed the PLAYGROUND, as you can see here this is any.

image

@frederikhors
Copy link
Contributor Author
frederikhors commented Mar 18, 2021 •
edited
Loading

I'm using:

"@typescript-eslint/eslint-plugin": "4.17.0",
"@typescript-eslint/parser": "4.17.0",
"typescript": "4.2.3",

With this tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "types": ["svelte", "node"]
  },

  "include": ["src/**/*", "types"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

And .eslintrc.js:

module.exports = {
  root: true,
  overrides: [
    {
      files: ['./*.js', './.*.js'],
      env: { node: true },
      parserOptions: { sourceType: 'module', ecmaVersion: 2020 },
      extends: ['eslint:recommended']
    },

    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3',
      env: { es6: true, browser: true },
      parser: '@typescript-eslint/parser',
      parserOptions: {
        tsconfigRootDir: __dirname,
        project: './tsconfig.json',
        extraFileExtensions: ['.svelte']
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],
      plugins: ['svelte3', '@typescript-eslint'],
      settings: { 'svelte3/typescript': require('typescript') },
      rules: {
        '@typescript-eslint/no-unsafe-member-access': 0
      }
    },

    {
      files: ['*.ts', '*.tsx'],
      env: { es6: true, browser: true },
      parser: '@typescript-eslint/parser',
      parserOptions: {
        tsconfigRootDir: __dirname,
        project: './tsconfig.json',
        extraFileExtensions: ['.svelte']
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],
      plugins: ['svelte3', '@typescript-eslint'],
      settings: { 'svelte3/typescript': require('typescript') }
    }
  ]
}

@JounQin
Copy link
JounQin commented Mar 18, 2021 •
edited
Loading

Maybe it's time to provide a runnable reproduction now.

I don't know what's wrong with your playground.

image

@frederikhors
Copy link
Contributor Author

It works now on my Playground. But I still have that problem locally. What's the typescript version of the playground?

@JounQin
Copy link
JounQin commented Mar 18, 2021

https://github.com/armano2/typescript-eslint/blob/docs-page/package.json#L126

@frederikhors
Copy link
Contributor Author

Ok. I have the reproducible repo: https://github.com/frederikhors/issueWithThisAny

image

@JounQin
Copy link
JounQin commented Mar 18, 2021 •
edited
Loading

@frederikhors

If you enabled "noImplicitThis": true compileOption, it will just work.

Anyway, it's a ts usage problem, not related to eslint-plugin-svelte3 at all.

raised typescript-eslint/typescript-eslint#3197 for better message.

@JounQin JounQin mentioned this issue Mar 18, 2021
Closed
3 tasks
@frederikhors
Copy link
Contributor Author

Should we add "noImplicitThis": true to https://github.com/sveltejs/template/blob/master/scripts/setupTypeScript.js? What do you think?

@dummdidumm
Copy link
Member

No, that's up to the user to decide how strict he wants his type checking.

@frederikhors
Copy link
Contributor Author

I can close this. You people are wonderful people!

@JounQin JounQin mentioned this issue Mar 18, 2021
Closed
dummdidumm pushed a commit to sveltejs/svelte that referenced this issue Mar 24, 2021
@JounQin
chore: add this: void typing to store functions (#6094)
50dcc2a 
This is necessary so ESLint does not complain about possibly unbound method access
fixes sveltejs/eslint-plugin-svelte3#102
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore: mark nest method this: void for destructing safely
3 participants
@dummdidumm @JounQin @frederikhors
0