False positive `@typescript-eslint/consistent-type-imports` if imported type used in template declaration

[Tanimodori]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I'm using eslint-plugin-vue.
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.34.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

• vue-eslint-parser@9.1.0
• eslint-plugin-vue@9.9.0

What did you do?

Configuration

{
  "env": {
    "browser": true,
    "node": false
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "@typescript-eslint/consistent-type-imports": "error",

    /** These rules are disabled because they are incompatible with prettier */
    "vue/html-self-closing": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/max-attributes-per-line": "off"
  }
}

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
import type { Foo } from "./types";
// ^ Error: Type import "Foo" is used by decorator metadata.eslint(@typescript-eslint/consistent-type-imports)
import type { Bar } from "./types";
// Fine

const dummy_foo = {};
const dummy_bar = {} as Bar;
</script>

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="./assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <HelloWorld
        msg="You did it!"
        :foo="(dummy_foo as Foo)"
        :bar="dummy_bar"
      />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

or running pnpm lint

PS D:\Tanimodori\Project\__3RD__\vue-eslint-parser-type-decorator-repro@TMR> pnpm lint

> vue-eslint-parser-type-decorator-repro@0.0.0 lint D:\Tanimodori\Project\__3RD__\vue-eslint-parser-type-decorator-repro@TMR
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore


D:\Tanimodori\Project\__3RD__\vue-eslint-parser-type-decorator-repro@TMR\src\App.vue
  4:1  error  Type import "Foo" is used by decorator metadata  @typescript-eslint/consistent-type-imports

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

 ELIFECYCLE  Command failed with exit code 1.

What did you expect to happen?

There should be no error as no decorators used here.

What actually happened?

Eslint claims that type import "Foo" is used by decorator metadata (@typescript-eslint/consistent-type-imports)

Link to Minimal Reproducible Example

https://github.com/Tanimodori/vue-eslint-parser-type-decorator-repro

Additional comments

Running the lint command with --fix will just remove the type from import type { Foo } from "./types"; which results in TS 1371 (This import is never used as a value and must use 'import type' because the 'importsNotUsedAsValue' is set to 'error'.ts(1371))

[Shinigami92]

I can confirm this bug 👍

We have something like this

<template>
  <DAboutParkingspot :parkingspot-data="resourceData as Parkingspot" />
</template>

<script setup lang="ts">
import DAboutParkingspot from "@/components/.../DAboutParkingspot.vue";
import type { Parkingspot, Vehicle } from "@/repository/resource";
//            ~~~~~~~~~~~ 
import type { Ref } from "vue";
import { ref } from "vue";

const resourceData: Ref<Parkingspot | Vehicle | null> = ref(null);

// do something ...
</script>

Type import "Parkingspot" is used by decorator metadata.
eslint(https://typescript-eslint.io/rules/consistent-type-imports)

[Tanimodori]

Confirmed this issue is fixed. Thanks for fixing it!