vue3 打字稿问题，如何修复 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

<块引用>

你必须把新的声明放在 main.ts 文件中

@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中添加）

<块引用>

确保声明文件是一个 TypeScript 模块

为了利用模块扩充，您需要确保文件中至少有一个顶级 import 或 export，即使它只是 export {} .

In TypeScript，任何包含顶级 import 或 export 的文件都被视为“模块”。如果在模块之外进行类型声明，它将覆盖原始类型而不是扩充它们。

Answer 2

定义组件应该像下面这样声明

import { defineComponent } from 'vue'

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

更多detail

Answer 3

全局声明模块会覆盖原来的声明，所以模块“@vue/runtime-core”会被覆盖，而“vue”依赖于“@vue/...”，会导致这样的错误。

正确的方法是将“declare module '@vue/runtime-core'”放到不同的 .d.ts 文件中。