Typescript: Eslint can't detect types exported from Vue SFC

[jordan-erisman]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.56.0
• **eslint-plugin-vue version:9.20.1
• **Vue version:3.4.13
• **Node version:18.18
• **Operating System:OSX

Please show your full configuration:

module.exports = {
  ignorePatterns: ['tsconfig.json', '*.config.js', '*.config.ts'],
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  plugins: ['@typescript-eslint'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: ['tsconfig.json'],
    extraFileExtensions: ['.vue'],
  },
};

What did you do?

Reproduction link (StackBlitz). Run npm run lint

Child

<script lang="ts">
export type MyType = {
  test: string;
};
</script>

....

Parent

<script setup lang="ts">
import {type MyType} from './Child.vue';

// Unsafe assignment of an `any` value
const obj: MyType = { test: '123' };

// Unsafe member access .test on an `any` value
const test = obj.test;
</script>

What did you expect to happen? The imported types to work. Typescript recognizes the type and does not complain, but eslint throws and error.

What actually happened?

  14:7   error  Unsafe assignment of an `any` value           @typescript-eslint/no-unsafe-assignment
  14:16  error  Unsafe member access .test on an `any` value  @typescript-eslint/no-unsafe-member-access

✖ 2 problems (2 errors, 0 warnings)

Repository to reproduce this issue

Reproduction link (StackBlitz). Run npm run lint

[mcmule]

Hi! Are there any news regarding this? We've a new project with Vue3 and latest TS. Despite all our efforts (and experience with these tools, including older eslint), eslint returns the same errors, basically any "unsafe-" rule will raise errors on imported SFCs usage. Is it a missing feature, as flagged 8 months ago? A misconfiguration? or a bug?

@jordan-erisman , did you solve this?

[AlanLes]

Recently, I've encountered the same problem. Have you been able to solve this issue somehow, guys? :)

[repnop]

just want to confirm this is still an issue with ESLint v9, I was able to reproduce it with a fresh npm create vue@latest project and modifying the eslint.config.js to use rules which use type information, would really like to see a fix to this issue.

[peternedap]

Having this problem as well. A temporary fix is creating the following file

// Child.vue.d.ts

export type MyType = {
  test: string;
};

but this is a suboptimal solution as it requires us to keep the types the same across both files.

[jacekkarczmarczyk]

Why don't you just create a normal .ts file (not .d.ts) and export the type and import it in both components?

[FloEdelmann]

This is not something that eslint-plugin-vue can fix. The failing rules belong to the typescript-eslint plugin.

typescript-eslint uses the TypeScript lanugage server for its type-checked lint rules, and TypeScript can't parse .vue files. As a mitigation, you usually tell TypeScript via a global .d.ts file what type the default export from a Vue file is:

declare module '*.vue' {
    import type { DefineComponent } from 'vue'

    const component: DefineComponent
    export default component
}

However, any additional exports from individual components are not covered by this, so you have to write individual .d.ts files for them.

The Vue VS Code extension works around this problem with a special TypeScript compiler (vue-tsc) that can parse .vue files. Maybe that tool can help you generate those individual .d.ts files automatically?