vue-tsc Computed properties & instance methods not recognized as already bound (@typescript-eslint/unbound-method false positive)

[heyakyra]

I filed a ticket against eslint-plugin-vue and commented on a ticket here and on vue-eslint-parser, but starting a discussion because I don't really know where it belongs and nobody is likely to see the comment on a closed ticket.

What did you do?
Occurs when assigning to a variable or passing as a parameter to another function

  computed: {
    alwaysBound(): string {
      return "Always bound!";
    },
  },
  methods: {
    // Computed properties trigger the error
    getAlwaysBound(): string {
      const alwaysBound = this.alwaysBound; // <-- ERROR!
      return alwaysBound; 
    },
    // As do instance methods
    logAlwaysBound(): string {
      const alwaysBound = this.getAlwaysBound(); // <-- ERROR!
      console.log(this.getAlwaysBound());  // <-- ERROR!
    },

What did you expect to happen?
Vue instance methods and computed properties to be understood as already bound.

What actually happened?

Hitting this for all uses of computed properties and methods, which are all automatically bound by Vue already. eslint-config-typescript and vue-eslint-parser. Also, vue-tsc misunderstands computed properties as () -> ActualType instead of ActualType resulting in errors like Argument of type '() => ActualType' is not assignable to parameter of type 'ActualType'

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

eslint.config.js:

import {
  defineConfigWithVueTs,
  vueTsConfigs,
} from "@vue/eslint-config-typescript";
import { globalIgnores } from "eslint/config";
import prettierConfig from "@vue/eslint-config-prettier";
import standard from "@vue/eslint-config-standard-with-typescript";
import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import vueParser from "vue-eslint-parser";
import js from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import storybook from "eslint-plugin-storybook";

export default defineConfigWithVueTs(
  globalIgnores([
    "node_modules",
    "dist/",
    "components/*/dist/",
    "**/index.d.ts",
  ]),
  js.configs.recommended,
  standard,
  storybook.configs["flat/recommended"],
  vueTsConfigs.recommendedTypeChecked,
  pluginVue.configs["flat/recommended"],
  prettierConfig,
  {
    name: "our-project/base",
    files: ["**/*.{js,jsx,ts,tsx,vue}"],
    languageOptions: {
      globals: {
        ...globals.node,
        ...globals.browser,
      },
      sourceType: "module",
      ecmaVersion: "latest",
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        projectService: true,
        sourceType: "module",
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      […]
    }
  }
);

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "verbatimModuleSyntax": true,
    "types": ["node", "vue", "vitest/globals"],
    "allowJs": true,
    "checkJs": true,
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.vue",
    "**/*.js",
  ],
  "extends": [
    "@vue/tsconfig/tsconfig.dom.json",
    "@vue/tsconfig/tsconfig.lib.json"
  ],
  "exclude": ["node_modules", "types", "dist"]
}

[johnsoncodehk]

eslint-plugin-vue does not use the code parser from language-tools, so it cannot be resolved in this repo.

As an alternative, you can try tsslint, which has first-party Vue support based on language-tools code parser and is compatible with eslint rules.

[heyakyra]

Thanks, might have to give that a try at some point, but need to get this working for now. I think this may be related to language-tools as I mentioned in this bit:

vue-tsc misunderstands computed properties as () -> ActualType instead of ActualType resulting in errors like Argument of type '() => ActualType' is not assignable to parameter of type 'ActualType'

[KazariEX]

Please provide a minimal reproduction for the type issue. You can use https://play.vuejs.org.

[heyakyra]

Sorry, haven't had time to figure out the minimum reproduction (our project is quite large), but I managed to find a workaround that was used against Vue 2 even though we are on the latest Vue 3 and vue-tsc:

@iraklisg opened on Jul 8, 2022:

As a workaround, using a normal <script> alongside <script setup> that defines a name property makes the error dissappear

<script setup lang="ts">
...
</script>

<script lang="ts">
export default {
  name: 'HelloWorld.'
}
</script>