вопрос по машинописи vue3, как исправить ошибку ts (2305)?

#typescript #vue.js #vuejs3

#машинопись #vue.js #vuejs3

Вопрос:

введите описание изображения здесь

 declare module '*.vue' {
  import type { DefineComponent } from 'vue' // module "../node_modules/vue/dist/vue" has no exported member “DefineComponent”。ts(2305)
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
      $goto: any
  }
}
 

Почему появляется такое сообщение об ошибке? Я не понимаю, как это исправить?

Ответ №1:

вы должны поместить новое объявление в файл main.ts

@Zenthae — https://github.com/vuejs/vue-next/pull/982#issuecomment-787105294

Похоже, работает только тогда, когда операторы declare помещаются в ts файл (не .d.ts в файл). например

src/shim-vue.d.ts

 declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
 

src/main.ts

 import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// Placing it here or any other `.ts` file works
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
      $goto: any
  }
}
 

Из документации Vue

Информация об этом также добавлена в документацию Vue.

Смотрите: https://v3.vuejs.org/guide/typescript-support.html#augmenting-types-for-globalproperties (Добавлено вvuejs / docs-следующий #723)

Убедитесь, что файл объявления является модулем TypeScript

Чтобы воспользоваться расширением модуля, вам нужно убедиться, что в вашем файле есть хотя бы один import или верхнего уровня export , даже если это просто export {} .

В машинописи любой файл, содержащий import или верхнего уровня export , считается «модулем». Если объявление типа выполняется вне модуля, оно перезапишет исходные типы, а не дополнит их.

Ответ №2:

определение компонента должно быть объявлено, как показано ниже

 import { defineComponent } from 'vue'

const Component = defineComponent({
  // type inference enabled
})
 

подробнее

Ответ №3:

Модуль глобального объявления переопределит исходное объявление, поэтому модуль «@vue / runtime-core» будет перезаписан, в то время как «vue» полагается на «@vue / …», что приводит к такой ошибке.

Правильный способ — поместить «объявить модуль ‘@vue / runtime-core'» в другой .d.ts файл.