Как правильно регистрировать глобальные компоненты во vue + typescript для интексации?

Question

[bubaley]

Здравствуйте

VSCode не индексирует глобальные компоненты, которые и регистрирую.

app.component('CButton', CButton)
app.component('CIconButton', CIconButton)
app.component('ProductCard', ProductCard)

Синтаксис чуть другой, использую quasar. Сами компоненты работают корректно.. Просто говорит, что тип any и все.
Хотелось бы, чтобы все корректно отображалась, как будто я использую quasar компоненты (у них все замечательно).
Думал, что нужно указывать в shims-vue.d.ts, но не смог разобраться как это правильно сделать.

Comments

[Антон Антон]

А сами компоненты определены через export {} или export definecomponent({})?

[bubaley]

/* eslint-disable */

/// <reference types="vite/client" />
/// <reference types="vue/ref-macros" />

// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

Там вот так, но когда просто импорчу компоненту он говорит, что такого пути нет.
В самих компонентах нет, потому что использую setup, в документации нет инфы, что в таких нужно экспортить

[Антон Антон]

bubaley, ну как же нет? в https://vueframework.com/docs/v3/ru/ru/api/global-...
не написано, что это нужно для типизации только options style, а для любых компонентов

[bubaley]

Антон Антон,
https://vuejs.org/api/sfc-script-setup.html#basic-...
используем setup, там нигде нет defineComponent

[Антон Антон]

bubaley, а, я не так понял. подумал про этот setup https://vuejs.org/api/composition-api-setup.html

Answer 1

[bubaley]

Нашел простую реализацию

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    CButton: typeof CButton
  }
}

vscode начал индексировать и видеть все props, emits и т.д.