自定义组件类型声明文件出现冲突

[Megasu]

描述问题

自定义组件的类型声明文件 components.d.ts 与 @uni-helper/uni-app-types 类型出现冲突。

复现

复现步骤

1. 新建自定义类型声明文件 src\components\components.d.ts，并添加全局组件类型声明：

   declare module 'vue' {
   export interface GlobalComponents {
   // 组件路径已确认无误
   XtxCarousel: typeof import('./XtxCarousel.vue')['default']
   }
   }
   export {}

2. 最终导致 @uni-helper/uni-app-types 所提供的组件类型失效了，所有 uni-app 组件鼠标悬停类型为 unknow。
3. 目前自己通过三斜杠引用方式解决冲突，自定义全局组件类型和 @uni-helper/uni-app-types 可以共存。

   
   // 通过三斜杠引用
   /// <reference types="@uni-helper/uni-app-types" />

declare module 'vue' { export interface GlobalComponents { XtxCarousel: typeof import('./XtxCarousel.vue')['default'] } } export {}

### 其他补充
tsconfig.json 的 types 其实可以删除掉
```diff
{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
-      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
}

系统信息

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1195G7 @ 2.90GHz
    Memory: 3.38 GB / 15.79 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.22000.120

VsCode 1.74.1
Volar  v1.0.16

"@uni-helper/uni-app-types": "0.3.0",

使用的包管理器

pnpm

核对

• [X] 遵循我们的 行为准则
• [X] 检查是否已经有一个报告相同错误的问题，以避免重复创建。
• [X] 这是一个具体的错误。请开启 GitHub 讨论你的疑问。
• [X] 所提供的复现是这个问题的 最小复现。

[Megasu]

全局组件在 src\pages.json 中通过 easycom 配置自动注册，在项目中全局组件可正常工作。

{
  "easycom": {
    "autoscan": true,
    "custom": {
      // 自定义全局组件，把 components 文件夹中以 Xtx 开头的 vue 组件，注册为全局组件
      "^Xtx(.*)": "@/components/Xtx$1.vue"
    }
  },
}

[ModyQyW]

我这里复现不出来。方便的话可以给个 demo？

两个点我比较在意。

1. uni-app-types 里面全局组件的定义都是基于 @vue/runtime-core 的，而你给出的示例是 declare module 'vue'，不太确定有没有影响。

2. tsconfig.json 有没有 include 这个 components.d.ts？

[Megasu]

demo地址：https://gitee.com/Megasu/uni-app-types-demo

1. 自定义的类型声明文件需要写成 declare module 'vue' 写成 @vue/runtime-core 反而无法工作。
2. tsconfig.json 有没有 include 这个 components.d.ts？有的，默认模板中自动加载 src 目录下所有的 d.ts 文件。

   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]

[Megasu]

demo地址：https://gitee.com/Megasu/uni-app-types-demo

1. 自定义的类型声明文件需要写成 declare module 'vue' 写成 @vue/runtime-core 反而无法工作。
2. tsconfig.json 有没有 include 这个 components.d.ts？有的，默认模板中自动加载 src 目录下所有的 d.ts 文件。

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]

请问作者您那边能复现问题吗？ @ModyQyW

[ModyQyW]

我这边使用了你提供的 demo。components.d.ts 里面写成 declare module 'vue' 和 declare module '@vue/runtime-core' 都能正常工作，而且不需要三斜线指令。

[ModyQyW]

volar 官方文档建议 vue 3 使用 declare module '@vue/runtime-core'。

[ModyQyW]

我觉得需要你检查一下 VSCode 本地配置，包括 Volar 和 Take Over Mode，最后需要 Reload Window 试一下。看起来我这边无能为力。

[Megasu]

volar 官方文档建议 vue 3 使用 declare module '@vue/runtime-core'。

1. 按官方建议修改后反而类型失效
2. 已清空所有 VsCode 本地配置
3. 已开启 Volar 和 Take Over Mode
4. 已 Reload Window ，甚至是重启编辑器。

[Megasu]

Vant 组件库也是通过 declare module 'vue' 注册类型的

declare module 'vue' {
  export interface GlobalComponents {
    VanButton: typeof Button;
  }
}

源码地址：https://github.com/youzan/vant/blob/main/packages/vant/src/button/index.ts

[Megasu]

我也无法定位到 Bug 的原因，目前我和我同事都只能通过 declare module 'vue' 注册全局组件的类型，用 declare module '@vue/runtime-core' 反而不行。

删除掉了三斜杠的引入方式， uni-app 组件的类型就无法识别，截图中类型为 unknow。

[Megasu]

volar 官方文档建议 vue 3 使用 declare module '@vue/runtime-core'。

其实我也不知道 Volar 作者为什么定义全局组件的类型还要分 Vue 的版本写，为什么不能统一写法，同时按官方要求用 declare module '@vue/runtime-core' 反而无法工作。

[Megasu]

我是觉得非常奇怪，为什么同样的代码，您那边可以正常运行，为了排除变化，我已经注释掉了所有设置，还是一样情况。

我这边使用了你提供的 demo。components.d.ts 里面写成 declare module 'vue' 和 declare module '@vue/runtime-core' 都能正常工作，而且不需要三斜线指令。

[ModyQyW]

我也正在迷惑这一点……

[Megasu]

刚刚通过 pnpm i -D @vue/runtime-core ，需要显性的安装了 @vue/runtime-core 才行。 显式安装后依赖包后就不出现冲突了，可以删除掉三斜杠的引入。 问题虽然解决了，但是还是存在一些迷惑。🥲

[ModyQyW]

这真的挺诡异的。因为 vue 本身 dependencies 里有 @vue/runtime-core，不明白为什么没有安装上。

[ModyQyW]

但解决了就好。

[Zhang-Wei-666]

@Megasu

你用的 pnpm, 这是由于 pnpm 默认的文件结构导致的 要在项目根目录创建 .npmrc 文件, 并添加 shamefully-hoist=true 之后重新运行 pnpm install, 重启编辑器, 就没问题了

这是配置前

这是配置后

[ModyQyW]

确实是。我之前设了全局的 .npmrc 都忘了🤦

[Megasu]

@Zhang-Wei-666 非常感谢。❤️