Open
Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 7.32.0
- eslint-plugin-vue version: 7.18.0
- Node version: v14.17.6
- Operating System: Ubuntu 21.04
Please show your full configuration:
module.exports = {
env: {
browser: true,
es2021: true,
'jest/globals': true,
},
plugins: [
'vue',
'@typescript-eslint',
'jest',
],
// Ref: https://eslint.vuejs.org/user-guide/#usage
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
extraFileExtensions: ['.vue'],
},
extends: [
// Vue3 has different guide on <template :key>
'plugin:vue/vue3-essential',
'standard',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
rules: {
// Without this, eslint misjudge our store mutation definitions
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': ['error'],
// We follows braces style in Vue & TypeScript documentation
'space-before-function-paren': ['error', {
anonymous: 'always',
named: 'never',
asyncArrow: 'always',
}],
// Prevent creating change in Git diff
'comma-dangle': ['error', 'always-multiline'],
// Allow to skip "await" in front of "router.push".
'@typescript-eslint/no-floating-promises': ['error', {
ignoreVoid: true
}],
// Our API response follows Python style, camelCase cannot be guaranteed
'camelcase': 'off',
'no-void': ['error', { allowAsStatement: true }],
},
ignorePatterns: [
// Config files, don't pass them to @typescript-eslint
'*.js',
]
}What did you do?
I have a child component in Vue3LottieWeb.vue file, whose setup() function returns play, stop methods.
In parent component, I import that child component and use as template ref:
<script lang="ts">
export default defineComponent({
setup() {
const bell = ref<InstanceType<typeof Vue3LottieWeb>>()
const shakeBell = () => {
const player = bell.value
if (player) {
player.stop()
player.play()
}
}
return {
bell,
shakeBell,
}
}
})
</script>What did you expect to happen?
ESLint should not raise error.
What actually happened?
ESLint complains with "Unsafe assignment of an any value @typescript-eslint/no-unsafe-assignment"
When I hover the code in VS Code, Vetur successfully deduces the type of bell and bell.value, but ESLint not.
Repository to reproduce this issue
https://github.com/hongquan/failed-eslint-vue-ref-child-component