Failed to deduce type for ref on child component

[hongquan]

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

[hongquan]

@ota-meshi Added a reproducible repo.

[ota-meshi]

I think your problem is the same problem as [no-unsafe-*] rules section in vuejs/vue-eslint-parser#104. Please track of it issue.

[Maxim-Mazurok]

I was a bit confused, because I couldn't reproduce no-unsafe-* issues, because imported component seems to have correct type now. However your reproduction still seems to have the same issue:

I also found another unrelated issue when comparing your .vue and tsx code:

vue-tsc didn't catch type issue with renderer option not matching prop.renderer type.

Anyway, thanks for sharing your repro!