TypeScript type assertion in setup script causes parsing error

[dmolesUC]

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.32.0

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

• [email protected]
• [email protected]

What did you do?

Configuration

// .eslintrc.cjs
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    root: true,
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "@typescript-eslint/parser",
    },
    extends: [
        "eslint:recommended",
        "@vue/typescript/recommended",
    ],
    plugins: ["@typescript-eslint"],
    rules: {
    },
}

<script setup lang="ts">
import { Ref, ref } from 'vue'

defineProps<{ msg: string }>()

const count: Ref<number | undefined> = ref(0)

function incrementCount() {
  const c = <number>count.value // <- type assertion is here
  count.value = c + 1
}
</script>

What did you expect to happen?

Code lints without errors; or, at least, ESLint is able to parse the Vue component source file.

What actually happened?

Closing brace of the incrementCount() function produces the following parsing error:

/Users/david/Work/Scratch/ts-test/src/components/HelloWorld.vue
  12:0  error  Parsing error: Unexpected token. Did you mean `{'}'}` or `}`?

✖ 1 problem (1 error, 0 warnings)

Link to Minimal Reproducible Example

https://github.com/dmolesUC/ts-test

Additional comments

This is the out-of-the box Vite Vue3/Typescript example, slightly modified to add ESLint and the offending code.

Run yarn lint from the project root (or yarn eslint --ext .js,.ts,.vue src).

Relevant code is in src/components/HelloWorld.vue.

Note that identical code in src/helpers/helpers.ts parses & lints without error.

[ota-meshi]

It looks like your configuration has jsx enabled.

https://github.com/vuejs/eslint-config-typescript/blob/d68c7dc0fbfa428fc01578a176820f4b250886ce/index.js#L20

I think you should use as instead.

[dmolesUC]

@ota-meshi OK, should I be filing an issue with vuejs/eslint-config-typescript instead, then, do you think?

[dmolesUC]

I filed vuejs/eslint-config-typescript#55. I agree that using as syntax for type assertions would be better, but unfortunately, even if @typescript-eslint/consistent-type-assertions is set to enforce as syntax instead of angle bracket syntax, this doesn't help as the angle bracket syntax in the component will not be parsed and so cannot be identified as a failure. Maybe I should file an issue on @typescript-eslint/parser?