自定义组件类型声明文件出现冲突 about uni-app-types

[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]

但解决了就好。

[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"]

请问作者您那边能复现问题吗？ @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，不明白为什么没有安装上。

[Zhang-Wei-666]

@Megasu

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

这是配置前

这是配置后

[ModyQyW]

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

[Megasu]

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