vue3中对'@vue/runtime-core'模块扩展属性, 为什么会影响vue文件导入?

Question

开发环境

vscode+vertur或者volar都单独实验过, 都提示一样的错误.

env.d.ts

/// <reference types="vite/client" />
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

// 🚀追加内容
import { AxiosInstance } from 'axios';
import { Store } from 'vuex'
import { State } from './store'
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    // 为 `this.$http` 提供类型声明
    $http: AxiosInstance;
    // 为 `this.$store` 提供类型声明
    $store: Store<State>
  }
}

此时import { DefineComponent } from 'vue'这一行会报错, 导致declare module '*.vue'整体失效了, vue文件不能解析.

问题:

1. 如果追加的内容放到新的文件, 比如global.d.ts就一切正常, 请问这是为什么?
2. import { DefineComponent } from 'vue'这一行为什么是放在"declare module"内部, 放外部就不能识别vue文件了,这是为什么呢?
   

Answer 1

到 main.ts 中就好了

Answer 2

参考一下这篇文章 https://juejin.cn/post/700871...

env.d.ts 这个文件 加入到 tsconfig.json 的 include 中