typescript - vue3 typescript 问题，如何修复 ts(2305) 错误？

Question

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
  }
}

为什么会出现这样的报错？我不清楚，如何解决？

Answer 1

you have to put the new declaration in the main.ts file

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

似乎只有当声明语句放在 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-next#723)

Make sure the declaration file is a TypeScript module

In order to take advantage of module augmentation, you will need to ensure there is at least one top-level import or export in your file, even if it is just export {}.

In TypeScript, any file containing a top-level import or export is considered a 'module'. If type declaration is made outside of a module, it will overwrite the original types rather than augmenting them.