typescript - Hur man får VSCode att känna igen global komponent i Vue?

Hej, jag har ett projekt:

Vite -> Vue 3 -> Typescript (Jag använder Volar för .vue-syntax)

Och jag har gjort en global komponent Icon eftersom den används nästan överallt så jag kan bara skriva den utan att importera komponenten. Problemet är att VSCode tycker att det är ett fel (utan import).

Komponenten fungerar bra. Den importeras till Vue-appen i main.ts på detta sätt:

// registration of global component <Icon />
import IconComponent from './components/ui/icon/IconComponent.vue'
app.component('Icon', IconComponent)

Någon idé om hur jag kan säga till VSCode "hej, detta är en global komponent, så markera den inte som ett misstag i andra .vue-filer"? :)

Svar #1

Jag tror att jag har hittat svaret så jag kommer att posta det här.

På Volar GitHub finns det:

Definiera Globala Komponenter

"Lokala komponenter, inbyggda komponenter, inhemska HTML-element Typkontroll är tillgänglig utan konfiguration. För globala komponenter behöver du definiera GlobalComponents-gränssnittet, till exempel:"

// components.d.ts

// declare module '@vue/runtime-core' works for vue 3
// declare module 'vue' works for vue2 + vue 3
declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

export {}