ESLint Error in vant/types/notify.d.tsx

[lln7777]

Describe the bug 在Vue3 + typescript + ESlint的环境中编译会报 类型检查错误：

ERROR in /Users/oyo/projects/dataplatform/coconut/node_modules/vant/types/notify.d.ts
33:5 Subsequent property declarations must have the same type.  Property '$notify' must be of type 'ElNotification', but here has type 'Notify'.

Screenshots

Environment

• Device: MacOS
• Browser: Chrome
• Vant Version: v1.6.19

[chenjiahan]

看起来是因为你引入了其他组件库导致的类型冲突，暂时没有解决方法

[wangjiahan]

可以改一下定义的类型吗

[chenjiahan]

不行喔

[openks]

可以通过cdn方式引入，这样就会同时支持elementui和vant 另外需要配置

// shime-tsx.d.ts 文件里增加自定义属性
declare global {  
interface Window {
    ELEMENT: any,
    vant:any,
  }
}

// 调用的时候
window.vant.Toast("hello")
window.ELEMENT.Message("hello")

这样至少解决了两个ui无法打包的问题

[yingyuk]

原因是两个组件库都在应用上添加了 \$notify 方法;

解决方法是: 只安装一个组件库, 另一个组件库按需引入

报错示例:

npm install vant element-ui
# vant 和 element-ui 都有 $notify 方法, 会报错

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Vant);
Vue.use(ElementUI);

解决方案:

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

// 按需引入你用到的组件, 而不是安装整个组件库
import ElButton from 'element-ui/lib/button';
import 'element-ui/lib/theme-chalk/button.css';

Vue.use(Vant);
Vue.component('el-button', ElButton);

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      // 指向正确的声明映射
      "element-ui/lib/button": ["node_modules/element-ui/types/button"]
    }
  }
}

[victorwang0526]

按yingyuk的方案是可以解决的 如果有人想全部引入element-ui，按需引入vant，因为vant的types里没有独立的比如button.d.ts的文件，现提供如下办法按需引入vant。

解决方案：

main.ts

import Button from 'vant/lib/button'
import 'vant/lib/button/index.css'
Vue.component('van-button', Button)

在自己项目中增加button.d.ts，比如我的放在/src/components/vant/button.d.ts

import { VanComponent } from 'vant/types/component'

export class Button extends VanComponent {}

tsconfig.json

...
"paths": {
      ...
      "vant/lib/button": ["src/components/vant/button"],
      ...
    },
...

[LianSchedule]

还完整引入，把node_modules/element-ui/types/notification.d.ts 第82行注释掉，重新编译就可以了

[5265liu]

Describe the bug 在Vue3 + typescript + ESlint的环境中编译会报 类型检查错误：

ERROR in /Users/oyo/projects/dataplatform/coconut/node_modules/vant/types/notify.d.ts
33:5 Subsequent property declarations must have the same type.  Property '$notify' must be of type 'ElNotification', but here has type 'Notify'.

Screenshots

Environment

• Device: MacOS
• Browser: Chrome
• Vant Version: v1.6.19 我的引入vant和vue3 报错你怎么弄的