vue3 + ts 使用use时出现类型错误

[hjm100]

你好，请使用下面的链接创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

https://youzan.github.io/vant-issue-generater

---

不好意思下面链接打不开， ERROR in src/main.ts:9:9 TS2345: Argument of type 'typeof Button' is not assignable to parameter of type 'Plugin_2'. Type 'typeof Button' is not assignable to type '{ install: PluginInstallFunction; }'. Types of property 'install' are incompatible. Type '(vue: typeof import("/Users/wanghongji/Desktop/vue-next-test/node_modules/vue/dist/vue")) => void' is not assignable to type 'PluginInstallFunction'. Types of parameters 'vue' and 'app' are incompatible. Type 'App' is missing the following properties from type 'typeof import("/Users/wanghongji/Desktop/vue-next-test/node_modules/vue/dist/vue")': compile, useCssModule, useCssVars, createApp, and 104 more. 7 | const app = createApp(App); 8 |

9 | app.use(Button); | ^^^^^^ 10 | app.use(router); 11 | app.use(store); 12 | app.mount('#app');

https://youzan.github.io/vant-issue-generater

[apem789]

3.0.0-alpha.0 内部没处理button.d.ts，查看源码发现还有很多组件没处理xxx.d.ts 😃还有很多工作要做.估计等它rc版本就能正常使用了。 // paht: vant/types/index.d.ts // 目前进度: import Vue from 'vue'; import { VanComponent } from './component'; import { AddressEdit } from './address-edit'; import { Area } from './area'; import { Calendar } from './calendar'; import { Checkbox } from './checkbox'; import { CheckboxGroup } from './checkbox-group'; import { CountDown } from './count-down'; import { DatetimePicker } from './datetime-picker'; import { Dialog } from './dialog'; import { DropdownItem } from './dropdown-item'; import { Field } from './field'; import { Form } from './form'; import { ImagePreview } from './image-preview'; import { Lazyload } from './lazyload'; import { List } from './list'; import { Locale } from './locale'; import { Notify } from './notify'; import { Picker } from './picker'; import { Sku } from './sku'; import { Swipe } from './swipe'; import { SwipeCell } from './swipe-cell'; import { Tabs } from './tabs'; import { Toast } from './toast'; import { Uploader } from './uploader';

export const version: string; export function install(vue: typeof Vue): void;

export class ActionSheet extends VanComponent {} export class AddressList extends VanComponent {} export class Button extends VanComponent {} export class Card extends VanComponent {} export class Cell extends VanComponent {} export class CellGroup extends VanComponent {} export class Circle extends VanComponent {} export class Col extends VanComponent {} export class Collapse extends VanComponent {} export class CollapseItem extends VanComponent {} export class ContactCard extends VanComponent {} export class ContactEdit extends VanComponent {} export class ContactList extends VanComponent {} export class CouponCell extends VanComponent {} export class CouponList extends VanComponent {} export class Divider extends VanComponent {} export class DropdownMenu extends VanComponent {} export class Empty extends VanComponent {} export class Grid extends VanComponent {} export class GridItem extends VanComponent {} export class GoodsAction extends VanComponent {} export class GoodsActionButton extends VanComponent {} export class GoodsActionIcon extends VanComponent {} export class Icon extends VanComponent {} export class Image extends VanComponent {} export class IndexAnchor extends VanComponent {} export class IndexBar extends VanComponent {} export class Info extends VanComponent {} export class Loading extends VanComponent {} export class NavBar extends VanComponent {} export class NoticeBar extends VanComponent {} export class NumberKeyboard extends VanComponent {} export class Overlay extends VanComponent {} export class Pagination extends VanComponent {} export class Panel extends VanComponent {} export class PasswordInput extends VanComponent {} export class Popup extends VanComponent {} export class Progress extends VanComponent {} export class PullRefresh extends VanComponent {} export class Radio extends VanComponent {} export class RadioGroup extends VanComponent {} export class Rate extends VanComponent {} export class Row extends VanComponent {} export class Search extends VanComponent {} export class ShareSheet extends VanComponent {} export class Sidebar extends VanComponent {} export class SidebarItem extends VanComponent {} export class Skeleton extends VanComponent {} export class Slider extends VanComponent {} export class Step extends VanComponent {} export class Stepper extends VanComponent {} export class Steps extends VanComponent {} export class Sticky extends VanComponent {} export class SubmitBar extends VanComponent {} export class SwipeItem extends VanComponent {} export class Switch extends VanComponent {} export class SwitchCell extends VanComponent {} export class Tab extends VanComponent {} export class Tabbar extends VanComponent {} export class TabbarItem extends VanComponent {} export class Tag extends VanComponent {} export class TreeSelect extends VanComponent {}

export { AddressEdit, Area, Calendar, Checkbox, CheckboxGroup, CountDown, DatetimePicker, Dialog, DropdownItem, Form, Field, ImagePreview, Lazyload, List, Locale, Notify, Picker, Sku, Swipe, SwipeCell, Tabs, Toast, Uploader, };

[hjm100]

好的，希望快点更新呀

[liyu24]

@hjm100 我在vue3项目使用vant的时候也出现这个问题了，请问现在解决了吗

[chenjiahan]

已在 3.0.0-alpha.3 版本修复

[liyu24]

万分感谢

------------------ 原始邮件 ------------------ 发件人: "youzan/vant" <notifications@github.com>; 发送时间: 2020年9月1日(星期二) 下午4:43 收件人: "youzan/vant"<vant@noreply.github.com>; 抄送: "李煜"<307390819@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [youzan/vant] vue3 + ts 使用use时出现类型错误 (#7056)

已在 3.0.0-alpha.3 版本修复

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[Mikasa33]

一次性导入所有组件，还是会报类似的错误

ERROR in src/main.ts:14:9 TS2345: Argument of type 'typeof import("/test-next/node_modules/vant/types/index")' is not assignable to parameter of type 'Plugin_2'. Property 'install' is missing in type 'typeof import("/test-next/node_modules/vant/types/index")' but required in type '{ install: PluginInstallFunction; }'.

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

[chenjiahan]

@Mikasa33 已在 3.0.0-alpha.4 版本修复

[Mikasa33]

感谢🙏

[hjm100]

单独通过use注入组件的时候，虽然项目可以运行但是tslint还是会报上述错误，感觉应该是组件内部的问题吧

[hjm100]

为了不让其报错我只能不适用类型检测来处理