diff --git a/src/action-bar-button/index.ts b/src/action-bar-button/index.ts
index 0fa132d0c..697582b93 100644
--- a/src/action-bar-button/index.ts
+++ b/src/action-bar-button/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ActionBarButton from './ActionBarButton';
 
-const ActionBarButton = installable(_ActionBarButton);
+const ActionBarButton = withInstall<typeof _ActionBarButton>(_ActionBarButton);
 
 export default ActionBarButton;
 export { ActionBarButton };
diff --git a/src/action-bar-icon/index.ts b/src/action-bar-icon/index.ts
index aa06162df..4daa9aaaf 100644
--- a/src/action-bar-icon/index.ts
+++ b/src/action-bar-icon/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ActionBarIcon from './ActionBarIcon';
 
-const ActionBarIcon = installable(_ActionBarIcon);
+const ActionBarIcon = withInstall<typeof _ActionBarIcon>(_ActionBarIcon);
 
 export default ActionBarIcon;
 export { ActionBarIcon };
diff --git a/src/action-bar/index.ts b/src/action-bar/index.ts
index e5e7d32c0..46d08c53e 100644
--- a/src/action-bar/index.ts
+++ b/src/action-bar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ActionBar from './ActionBar';
 
-const ActionBar = installable(_ActionBar);
+const ActionBar = withInstall<typeof _ActionBar>(_ActionBar);
 
 export default ActionBar;
 export { ActionBar };
diff --git a/src/action-sheet/index.ts b/src/action-sheet/index.ts
index 1f740b821..12abb6c7f 100644
--- a/src/action-sheet/index.ts
+++ b/src/action-sheet/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ActionSheet from './ActionSheet';
 
-const ActionSheet = installable(_ActionSheet);
+const ActionSheet = withInstall<typeof _ActionSheet>(_ActionSheet);
 
 export default ActionSheet;
 export { ActionSheet };
diff --git a/src/address-edit/index.ts b/src/address-edit/index.ts
index 5646b6775..0ecb2428c 100644
--- a/src/address-edit/index.ts
+++ b/src/address-edit/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _AddressEdit from './AddressEdit';
 
-const AddressEdit = installable(_AddressEdit);
+const AddressEdit = withInstall<typeof _AddressEdit>(_AddressEdit);
 
 export default AddressEdit;
 export { AddressEdit };
diff --git a/src/address-list/index.ts b/src/address-list/index.ts
index 8a4175158..67c15a349 100644
--- a/src/address-list/index.ts
+++ b/src/address-list/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _AddressList from './AddressList';
 
-const AddressList = installable(_AddressList);
+const AddressList = withInstall<typeof _AddressList>(_AddressList);
 
 export default AddressList;
 export { AddressList };
diff --git a/src/area/index.ts b/src/area/index.ts
index 2d614c4f6..2e877b7f1 100644
--- a/src/area/index.ts
+++ b/src/area/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Area from './Area';
 
-const Area = installable(_Area);
+const Area = withInstall<typeof _Area>(_Area);
 
 export default Area;
 export { Area };
diff --git a/src/badge/index.ts b/src/badge/index.ts
index 5894f7d4f..78fcc048b 100644
--- a/src/badge/index.ts
+++ b/src/badge/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Badge from './Badge';
 
-const Badge = installable(_Badge);
+const Badge = withInstall<typeof _Badge>(_Badge);
 
 export default Badge;
 export { Badge };
diff --git a/src/button/index.ts b/src/button/index.ts
index 47b1e9351..1613c52a1 100644
--- a/src/button/index.ts
+++ b/src/button/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Button from './Button';
 
-const Button = installable(_Button);
+const Button = withInstall<typeof _Button>(_Button);
 
 export default Button;
 export { Button };
diff --git a/src/calendar/index.ts b/src/calendar/index.ts
index a7f388127..74ea6df82 100644
--- a/src/calendar/index.ts
+++ b/src/calendar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Calendar from './Calendar';
 
-const Calendar = installable(_Calendar);
+const Calendar = withInstall<typeof _Calendar>(_Calendar);
 
 export default Calendar;
 export { Calendar };
diff --git a/src/card/index.ts b/src/card/index.ts
index f117c0b58..0ee865244 100644
--- a/src/card/index.ts
+++ b/src/card/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Card from './Card';
 
-const Card = installable(_Card);
+const Card = withInstall<typeof _Card>(_Card);
 
 export default Card;
 export { Card };
diff --git a/src/cascader/index.ts b/src/cascader/index.ts
index 6b93cf8cf..e55e0e44b 100644
--- a/src/cascader/index.ts
+++ b/src/cascader/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Cascader from './Cascader';
 
-const Cascader = installable(_Cascader);
+const Cascader = withInstall<typeof _Cascader>(_Cascader);
 
 export default Cascader;
 export { Cascader };
diff --git a/src/cell-group/index.ts b/src/cell-group/index.ts
index ff453319b..cc4e68d96 100644
--- a/src/cell-group/index.ts
+++ b/src/cell-group/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CellGroup from './CellGroup';
 
-const CellGroup = installable(_CellGroup);
+const CellGroup = withInstall<typeof _CellGroup>(_CellGroup);
 
 export default CellGroup;
 export { CellGroup };
diff --git a/src/cell/index.ts b/src/cell/index.ts
index 4698e8667..08ee00947 100644
--- a/src/cell/index.ts
+++ b/src/cell/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Cell from './Cell';
 
-const Cell = installable(_Cell);
+const Cell = withInstall<typeof _Cell>(_Cell);
 
 export default Cell;
 export { Cell };
diff --git a/src/checkbox-group/index.ts b/src/checkbox-group/index.ts
index b83aad667..cf401922b 100644
--- a/src/checkbox-group/index.ts
+++ b/src/checkbox-group/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CheckboxGroup from './CheckboxGroup';
 
-const CheckboxGroup = installable(_CheckboxGroup);
+const CheckboxGroup = withInstall<typeof _CheckboxGroup>(_CheckboxGroup);
 
 export default CheckboxGroup;
 export { CheckboxGroup };
diff --git a/src/checkbox/index.ts b/src/checkbox/index.ts
index befc29fb1..a02bf34d5 100644
--- a/src/checkbox/index.ts
+++ b/src/checkbox/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Checkbox from './Checkbox';
 
-const Checkbox = installable(_Checkbox);
+const Checkbox = withInstall<typeof _Checkbox>(_Checkbox);
 
 export default Checkbox;
 export { Checkbox };
diff --git a/src/circle/index.ts b/src/circle/index.ts
index 8832ea980..ed855a566 100644
--- a/src/circle/index.ts
+++ b/src/circle/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Circle from './Circle';
 
-const Circle = installable(_Circle);
+const Circle = withInstall<typeof _Circle>(_Circle);
 
 export default Circle;
 export { Circle };
diff --git a/src/col/index.ts b/src/col/index.ts
index e0fef5032..8b7557067 100644
--- a/src/col/index.ts
+++ b/src/col/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Col from './Col';
 
-const Col = installable(_Col);
+const Col = withInstall<typeof _Col>(_Col);
 
 export default Col;
 export { Col };
diff --git a/src/collapse-item/index.ts b/src/collapse-item/index.ts
index 873269d80..1c6a54f29 100644
--- a/src/collapse-item/index.ts
+++ b/src/collapse-item/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CollapseItem from './CollapseItem';
 
-const CollapseItem = installable(_CollapseItem);
+const CollapseItem = withInstall<typeof _CollapseItem>(_CollapseItem);
 
 export default CollapseItem;
 export { CollapseItem };
diff --git a/src/collapse/index.ts b/src/collapse/index.ts
index d7693c0b5..3e2123981 100644
--- a/src/collapse/index.ts
+++ b/src/collapse/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Collapse from './Collapse';
 
-const Collapse = installable(_Collapse);
+const Collapse = withInstall<typeof _Collapse>(_Collapse);
 
 export default Collapse;
 export { Collapse };
diff --git a/src/contact-card/index.ts b/src/contact-card/index.ts
index 74cd4fa3f..e3d16eaeb 100644
--- a/src/contact-card/index.ts
+++ b/src/contact-card/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ContactCard from './ContactCard';
 
-const ContactCard = installable(_ContactCard);
+const ContactCard = withInstall<typeof _ContactCard>(_ContactCard);
 
 export default ContactCard;
 export { ContactCard };
diff --git a/src/contact-edit/index.ts b/src/contact-edit/index.ts
index 176e43a6c..5200f3679 100644
--- a/src/contact-edit/index.ts
+++ b/src/contact-edit/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ContactEdit from './ContactEdit';
 
-const ContactEdit = installable(_ContactEdit);
+const ContactEdit = withInstall<typeof _ContactEdit>(_ContactEdit);
 
 export default ContactEdit;
 export { ContactEdit };
diff --git a/src/contact-list/index.ts b/src/contact-list/index.ts
index 1ec0e70b2..8475cafe1 100644
--- a/src/contact-list/index.ts
+++ b/src/contact-list/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ContactList from './ContactList';
 
-const ContactList = installable(_ContactList);
+const ContactList = withInstall<typeof _ContactList>(_ContactList);
 
 export default ContactList;
 export { ContactList };
diff --git a/src/count-down/index.ts b/src/count-down/index.ts
index 64a077dd1..8563b3ba5 100644
--- a/src/count-down/index.ts
+++ b/src/count-down/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CountDown from './CountDown';
 
-const CountDown = installable(_CountDown);
+const CountDown = withInstall<typeof _CountDown>(_CountDown);
 
 export default CountDown;
 export { CountDown };
diff --git a/src/coupon-cell/index.ts b/src/coupon-cell/index.ts
index d2f6fa323..ab8ea34be 100644
--- a/src/coupon-cell/index.ts
+++ b/src/coupon-cell/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CouponCell from './CouponCell';
 
-const CouponCell = installable(_CouponCell);
+const CouponCell = withInstall<typeof _CouponCell>(_CouponCell);
 
 export default CouponCell;
 export { CouponCell };
diff --git a/src/coupon-list/index.ts b/src/coupon-list/index.ts
index ffa79b162..f5deddfa9 100644
--- a/src/coupon-list/index.ts
+++ b/src/coupon-list/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CouponList from './CouponList';
 
-const CouponList = installable(_CouponList);
+const CouponList = withInstall<typeof _CouponList>(_CouponList);
 
 export default CouponList;
 export { CouponList };
diff --git a/src/coupon/index.ts b/src/coupon/index.ts
index d653bc43f..4ce22de3f 100644
--- a/src/coupon/index.ts
+++ b/src/coupon/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Coupon from './Coupon';
 
-const Coupon = installable(_Coupon);
+const Coupon = withInstall<typeof _Coupon>(_Coupon);
 
 export default Coupon;
 export { Coupon };
diff --git a/src/datetime-picker/index.ts b/src/datetime-picker/index.ts
index 9c26c8d67..fdd3b561f 100644
--- a/src/datetime-picker/index.ts
+++ b/src/datetime-picker/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _DatetimePicker from './DatetimePicker';
 
-const DatetimePicker = installable(_DatetimePicker);
+const DatetimePicker = withInstall<typeof _DatetimePicker>(_DatetimePicker);
 
 export default DatetimePicker;
 export { DatetimePicker };
diff --git a/src/dialog/index.tsx b/src/dialog/index.tsx
index 76cd2da52..8382349ab 100644
--- a/src/dialog/index.tsx
+++ b/src/dialog/index.tsx
@@ -1,5 +1,5 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance, installable } from '../utils';
+import { inBrowser, ComponentInstance, withInstall } from '../utils';
 import { Interceptor } from '../utils/interceptor';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanDialog, {
@@ -120,10 +120,10 @@ Dialog.resetDefaultOptions = () => {
 };
 
 Dialog.install = (app: App) => {
-  app.use(installable(VanDialog));
+  app.use(withInstall<typeof VanDialog>(VanDialog));
   app.config.globalProperties.$dialog = Dialog;
 };
 
-Dialog.Component = installable(VanDialog);
+Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
 
 export default Dialog;
diff --git a/src/divider/index.ts b/src/divider/index.ts
index 5ea175f30..1309d44a9 100644
--- a/src/divider/index.ts
+++ b/src/divider/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Divider from './Divider';
 
-const Divider = installable(_Divider);
+const Divider = withInstall<typeof _Divider>(_Divider);
 
 export default Divider;
 export { Divider };
diff --git a/src/dropdown-item/index.ts b/src/dropdown-item/index.ts
index ec854c0e9..d287e80b2 100644
--- a/src/dropdown-item/index.ts
+++ b/src/dropdown-item/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _DropdownItem from './DropdownItem';
 
-const DropdownItem = installable(_DropdownItem);
+const DropdownItem = withInstall<typeof _DropdownItem>(_DropdownItem);
 
 export default DropdownItem;
 export { DropdownItem };
diff --git a/src/dropdown-menu/index.ts b/src/dropdown-menu/index.ts
index 0409af1d6..566764b3f 100644
--- a/src/dropdown-menu/index.ts
+++ b/src/dropdown-menu/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _DropdownMenu from './DropdownMenu';
 
-const DropdownMenu = installable(_DropdownMenu);
+const DropdownMenu = withInstall<typeof _DropdownMenu>(_DropdownMenu);
 
 export default DropdownMenu;
 export { DropdownMenu };
diff --git a/src/empty/index.ts b/src/empty/index.ts
index c9b20b0b9..c13ec866b 100644
--- a/src/empty/index.ts
+++ b/src/empty/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Empty from './Empty';
 
-const Empty = installable(_Empty);
+const Empty = withInstall<typeof _Empty>(_Empty);
 
 export default Empty;
 export { Empty };
diff --git a/src/field/index.ts b/src/field/index.ts
index 01b7dcdd3..25da43bc7 100644
--- a/src/field/index.ts
+++ b/src/field/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Field from './Field';
 
-const Field = installable(_Field);
+const Field = withInstall<typeof _Field>(_Field);
 
 export default Field;
 export { Field };
diff --git a/src/form/index.ts b/src/form/index.ts
index f8f3da32f..7aeffc426 100644
--- a/src/form/index.ts
+++ b/src/form/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Form from './Form';
 
-const Form = installable(_Form);
+const Form = withInstall<typeof _Form>(_Form);
 
 export default Form;
 export { Form };
diff --git a/src/grid-item/index.ts b/src/grid-item/index.ts
index 2c60f41d9..c18facb37 100644
--- a/src/grid-item/index.ts
+++ b/src/grid-item/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _GridItem from './GridItem';
 
-const GridItem = installable(_GridItem);
+const GridItem = withInstall<typeof _GridItem>(_GridItem);
 
 export default GridItem;
 export { GridItem };
diff --git a/src/grid/index.ts b/src/grid/index.ts
index 3fbc76760..84cf90c9f 100644
--- a/src/grid/index.ts
+++ b/src/grid/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Grid from './Grid';
 
-const Grid = installable(_Grid);
+const Grid = withInstall<typeof _Grid>(_Grid);
 
 export default Grid;
 export { Grid };
diff --git a/src/icon/index.ts b/src/icon/index.ts
index 537a3056d..a30d8d6ec 100644
--- a/src/icon/index.ts
+++ b/src/icon/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Icon from './Icon';
 
-const Icon = installable(_Icon);
+const Icon = withInstall<typeof _Icon>(_Icon);
 
 export default Icon;
 export { Icon };
diff --git a/src/image-preview/index.tsx b/src/image-preview/index.tsx
index 8c16d6875..cb02e07ee 100644
--- a/src/image-preview/index.tsx
+++ b/src/image-preview/index.tsx
@@ -1,5 +1,5 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { ComponentInstance, inBrowser, installable } from '../utils';
+import { ComponentInstance, inBrowser, withInstall } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import { Interceptor } from '../utils/interceptor';
 import { PopupCloseIconPosition } from '../popup';
@@ -97,10 +97,10 @@ const ImagePreview = (
   return instance;
 };
 
-ImagePreview.Component = installable(VanImagePreview);
+ImagePreview.Component = withInstall<typeof VanImagePreview>(VanImagePreview);
 
 ImagePreview.install = (app: App) => {
-  app.use(installable(VanImagePreview));
+  app.use(withInstall<typeof VanImagePreview>(VanImagePreview));
 };
 
 export default ImagePreview;
diff --git a/src/image/index.ts b/src/image/index.ts
index f487a4662..9aacacebc 100644
--- a/src/image/index.ts
+++ b/src/image/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Image from './Image';
 
-const Image = installable(_Image);
+const Image = withInstall<typeof _Image>(_Image);
 
 export default Image;
 export { Image };
diff --git a/src/index-anchor/index.ts b/src/index-anchor/index.ts
index 9ea3619d4..ef961de7c 100644
--- a/src/index-anchor/index.ts
+++ b/src/index-anchor/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _IndexAnchor from './IndexAnchor';
 
-const IndexAnchor = installable(_IndexAnchor);
+const IndexAnchor = withInstall<typeof _IndexAnchor>(_IndexAnchor);
 
 export default IndexAnchor;
 export { IndexAnchor };
diff --git a/src/index-bar/index.ts b/src/index-bar/index.ts
index 5ef4e2630..0498535c6 100644
--- a/src/index-bar/index.ts
+++ b/src/index-bar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _IndexBar from './IndexBar';
 
-const IndexBar = installable(_IndexBar);
+const IndexBar = withInstall<typeof _IndexBar>(_IndexBar);
 
 export default IndexBar;
 export { IndexBar };
diff --git a/src/list/index.ts b/src/list/index.ts
index 223e63a7f..3e19f402f 100644
--- a/src/list/index.ts
+++ b/src/list/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _List from './List';
 
-const List = installable(_List);
+const List = withInstall<typeof _List>(_List);
 
 export default List;
 export { List };
diff --git a/src/loading/index.ts b/src/loading/index.ts
index 106ff725e..f2475cffe 100644
--- a/src/loading/index.ts
+++ b/src/loading/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Loading from './Loading';
 
-const Loading = installable(_Loading);
+const Loading = withInstall<typeof _Loading>(_Loading);
 
 export default Loading;
 export { Loading };
diff --git a/src/nav-bar/index.ts b/src/nav-bar/index.ts
index caf79372e..fa712de5b 100644
--- a/src/nav-bar/index.ts
+++ b/src/nav-bar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _NavBar from './NavBar';
 
-const NavBar = installable(_NavBar);
+const NavBar = withInstall<typeof _NavBar>(_NavBar);
 
 export default NavBar;
 export { NavBar };
diff --git a/src/notice-bar/index.ts b/src/notice-bar/index.ts
index f247b9835..540235eb1 100644
--- a/src/notice-bar/index.ts
+++ b/src/notice-bar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _NoticeBar from './NoticeBar';
 
-const NoticeBar = installable(_NoticeBar);
+const NoticeBar = withInstall<typeof _NoticeBar>(_NoticeBar);
 
 export default NoticeBar;
 export { NoticeBar };
diff --git a/src/notify/index.tsx b/src/notify/index.tsx
index 2f8e81ddc..ec93d5327 100644
--- a/src/notify/index.tsx
+++ b/src/notify/index.tsx
@@ -1,5 +1,5 @@
 import { App } from 'vue';
-import { isObject, inBrowser, ComponentInstance, installable } from '../utils';
+import { isObject, inBrowser, ComponentInstance, withInstall } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanNotify, { NotifyType } from './Notify';
 
@@ -97,10 +97,10 @@ Notify.resetDefaultOptions = () => {
 };
 
 Notify.install = (app: App) => {
-  app.use(installable(VanNotify));
+  app.use(withInstall<typeof VanNotify>(VanNotify));
   app.config.globalProperties.$notify = Notify;
 };
 
-Notify.Component = installable(VanNotify);
+Notify.Component = withInstall<typeof VanNotify>(VanNotify);
 
 export default Notify;
diff --git a/src/number-keyboard/index.ts b/src/number-keyboard/index.ts
index 040c32e81..5e952d2e1 100644
--- a/src/number-keyboard/index.ts
+++ b/src/number-keyboard/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _NumberKeyboard from './NumberKeyboard';
 
-const NumberKeyboard = installable(_NumberKeyboard);
+const NumberKeyboard = withInstall<typeof _NumberKeyboard>(_NumberKeyboard);
 
 export default NumberKeyboard;
 export { NumberKeyboard };
diff --git a/src/overlay/index.ts b/src/overlay/index.ts
index e1ac434fe..1ac0504ec 100644
--- a/src/overlay/index.ts
+++ b/src/overlay/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Overlay from './Overlay';
 
-const Overlay = installable(_Overlay);
+const Overlay = withInstall<typeof _Overlay>(_Overlay);
 
 export default Overlay;
 export { Overlay };
diff --git a/src/pagination/index.ts b/src/pagination/index.ts
index f7b7f642f..5ce3213c6 100644
--- a/src/pagination/index.ts
+++ b/src/pagination/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Pagination from './Pagination';
 
-const Pagination = installable(_Pagination);
+const Pagination = withInstall<typeof _Pagination>(_Pagination);
 
 export default Pagination;
 export { Pagination };
diff --git a/src/password-input/index.ts b/src/password-input/index.ts
index 6b6575a67..e57f50041 100644
--- a/src/password-input/index.ts
+++ b/src/password-input/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _PasswordInput from './PasswordInput';
 
-const PasswordInput = installable(_PasswordInput);
+const PasswordInput = withInstall<typeof _PasswordInput>(_PasswordInput);
 
 export default PasswordInput;
 export { PasswordInput };
diff --git a/src/picker/index.ts b/src/picker/index.ts
index c8069cde9..cb06b6cab 100644
--- a/src/picker/index.ts
+++ b/src/picker/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Picker from './Picker';
 
-const Picker = installable(_Picker);
+const Picker = withInstall<typeof _Picker>(_Picker);
 
 export default Picker;
 export { Picker };
diff --git a/src/popover/index.ts b/src/popover/index.ts
index 088e313c1..9ad259494 100644
--- a/src/popover/index.ts
+++ b/src/popover/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Popover from './Popover';
 
-const Popover = installable(_Popover);
+const Popover = withInstall<typeof _Popover>(_Popover);
 
 export default Popover;
 export { Popover };
diff --git a/src/popup/index.ts b/src/popup/index.ts
index 04aa87221..3df91a8df 100644
--- a/src/popup/index.ts
+++ b/src/popup/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Popup from './Popup';
 
-const Popup = installable(_Popup);
+const Popup = withInstall<typeof _Popup>(_Popup);
 
 export default Popup;
 export { Popup };
diff --git a/src/progress/index.ts b/src/progress/index.ts
index ff6092b35..aac193b71 100644
--- a/src/progress/index.ts
+++ b/src/progress/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Progress from './Progress';
 
-const Progress = installable(_Progress);
+const Progress = withInstall<typeof _Progress>(_Progress);
 
 export default Progress;
 export { Progress };
diff --git a/src/pull-refresh/index.ts b/src/pull-refresh/index.ts
index dcfc999e6..9cb6d7816 100644
--- a/src/pull-refresh/index.ts
+++ b/src/pull-refresh/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _PullRefresh from './PullRefresh';
 
-const PullRefresh = installable(_PullRefresh);
+const PullRefresh = withInstall<typeof _PullRefresh>(_PullRefresh);
 
 export default PullRefresh;
 export { PullRefresh };
diff --git a/src/radio-group/index.ts b/src/radio-group/index.ts
index eced898e5..46b5b1659 100644
--- a/src/radio-group/index.ts
+++ b/src/radio-group/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _RadioGroup from './RadioGroup';
 
-const RadioGroup = installable(_RadioGroup);
+const RadioGroup = withInstall<typeof _RadioGroup>(_RadioGroup);
 
 export default RadioGroup;
 export { RadioGroup };
diff --git a/src/radio/index.ts b/src/radio/index.ts
index 5aa6b4097..361534913 100644
--- a/src/radio/index.ts
+++ b/src/radio/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Radio from './Radio';
 
-const Radio = installable(_Radio);
+const Radio = withInstall<typeof _Radio>(_Radio);
 
 export default Radio;
 export { Radio };
diff --git a/src/rate/index.ts b/src/rate/index.ts
index 92dc0eb9b..168e40c8b 100644
--- a/src/rate/index.ts
+++ b/src/rate/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Rate from './Rate';
 
-const Rate = installable(_Rate);
+const Rate = withInstall<typeof _Rate>(_Rate);
 
 export default Rate;
 export { Rate };
diff --git a/src/row/index.ts b/src/row/index.ts
index 32a906e6d..b15dd68ed 100644
--- a/src/row/index.ts
+++ b/src/row/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Row from './Row';
 
-const Row = installable(_Row);
+const Row = withInstall<typeof _Row>(_Row);
 
 export default Row;
 export { Row };
diff --git a/src/search/index.ts b/src/search/index.ts
index dfad957a8..8d867887f 100644
--- a/src/search/index.ts
+++ b/src/search/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Search from './Search';
 
-const Search = installable(_Search);
+const Search = withInstall<typeof _Search>(_Search);
 
 export default Search;
 export { Search };
diff --git a/src/share-sheet/index.ts b/src/share-sheet/index.ts
index 784187edd..8073f3e40 100644
--- a/src/share-sheet/index.ts
+++ b/src/share-sheet/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ShareSheet from './ShareSheet';
 
-const ShareSheet = installable(_ShareSheet);
+const ShareSheet = withInstall<typeof _ShareSheet>(_ShareSheet);
 
 export default ShareSheet;
 export { ShareSheet };
diff --git a/src/sidebar-item/index.ts b/src/sidebar-item/index.ts
index 905467c4c..d16a4f091 100644
--- a/src/sidebar-item/index.ts
+++ b/src/sidebar-item/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SidebarItem from './SidebarItem';
 
-const SidebarItem = installable(_SidebarItem);
+const SidebarItem = withInstall<typeof _SidebarItem>(_SidebarItem);
 
 export default SidebarItem;
 export { SidebarItem };
diff --git a/src/sidebar/index.ts b/src/sidebar/index.ts
index cc77fba82..9a1a9ff40 100644
--- a/src/sidebar/index.ts
+++ b/src/sidebar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Sidebar from './Sidebar';
 
-const Sidebar = installable(_Sidebar);
+const Sidebar = withInstall<typeof _Sidebar>(_Sidebar);
 
 export default Sidebar;
 export { Sidebar };
diff --git a/src/skeleton/index.ts b/src/skeleton/index.ts
index fedc571ba..a7ee7d865 100644
--- a/src/skeleton/index.ts
+++ b/src/skeleton/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Skeleton from './Skeleton';
 
-const Skeleton = installable(_Skeleton);
+const Skeleton = withInstall<typeof _Skeleton>(_Skeleton);
 
 export default Skeleton;
 export { Skeleton };
diff --git a/src/slider/index.ts b/src/slider/index.ts
index 8859781d8..8fe52e8e8 100644
--- a/src/slider/index.ts
+++ b/src/slider/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Slider from './Slider';
 
-const Slider = installable(_Slider);
+const Slider = withInstall<typeof _Slider>(_Slider);
 
 export default Slider;
 export { Slider };
diff --git a/src/step/index.ts b/src/step/index.ts
index 2c87b98df..955026e19 100644
--- a/src/step/index.ts
+++ b/src/step/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Step from './Step';
 
-const Step = installable(_Step);
+const Step = withInstall<typeof _Step>(_Step);
 
 export default Step;
 export { Step };
diff --git a/src/stepper/index.ts b/src/stepper/index.ts
index 101d14d58..788c6880e 100644
--- a/src/stepper/index.ts
+++ b/src/stepper/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Stepper from './Stepper';
 
-const Stepper = installable(_Stepper);
+const Stepper = withInstall<typeof _Stepper>(_Stepper);
 
 export default Stepper;
 export { Stepper };
diff --git a/src/steps/index.ts b/src/steps/index.ts
index 40647eee2..4757f1903 100644
--- a/src/steps/index.ts
+++ b/src/steps/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Steps from './Steps';
 
-const Steps = installable(_Steps);
+const Steps = withInstall<typeof _Steps>(_Steps);
 
 export default Steps;
 export { Steps };
diff --git a/src/sticky/index.ts b/src/sticky/index.ts
index fc058344b..e78497937 100644
--- a/src/sticky/index.ts
+++ b/src/sticky/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Sticky from './Sticky';
 
-const Sticky = installable(_Sticky);
+const Sticky = withInstall<typeof _Sticky>(_Sticky);
 
 export default Sticky;
 export { Sticky };
diff --git a/src/submit-bar/index.ts b/src/submit-bar/index.ts
index 2f08ea1a6..4e4255139 100644
--- a/src/submit-bar/index.ts
+++ b/src/submit-bar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SubmitBar from './SubmitBar';
 
-const SubmitBar = installable(_SubmitBar);
+const SubmitBar = withInstall<typeof _SubmitBar>(_SubmitBar);
 
 export default SubmitBar;
 export { SubmitBar };
diff --git a/src/swipe-cell/index.ts b/src/swipe-cell/index.ts
index 68ab7ccc7..edb900f52 100644
--- a/src/swipe-cell/index.ts
+++ b/src/swipe-cell/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SwipeCell from './SwipeCell';
 
-const SwipeCell = installable(_SwipeCell);
+const SwipeCell = withInstall<typeof _SwipeCell>(_SwipeCell);
 
 export default SwipeCell;
 export { SwipeCell };
diff --git a/src/swipe-item/index.ts b/src/swipe-item/index.ts
index 3f680067f..e4ab1dd20 100644
--- a/src/swipe-item/index.ts
+++ b/src/swipe-item/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SwipeItem from './SwipeItem';
 
-const SwipeItem = installable(_SwipeItem);
+const SwipeItem = withInstall<typeof _SwipeItem>(_SwipeItem);
 
 export default SwipeItem;
 export { SwipeItem };
diff --git a/src/swipe/index.ts b/src/swipe/index.ts
index 2f22d4714..d5a58c5b0 100644
--- a/src/swipe/index.ts
+++ b/src/swipe/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Swipe from './Swipe';
 
-const Swipe = installable(_Swipe);
+const Swipe = withInstall<typeof _Swipe>(_Swipe);
 
 export default Swipe;
 export { Swipe };
diff --git a/src/switch/index.ts b/src/switch/index.ts
index 4c3fa1121..37fdc48e4 100644
--- a/src/switch/index.ts
+++ b/src/switch/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Switch from './Switch';
 
-const Switch = installable(_Switch);
+const Switch = withInstall<typeof _Switch>(_Switch);
 
 export default Switch;
 export { Switch };
diff --git a/src/tab/index.ts b/src/tab/index.ts
index 085d7422a..89b9f23dd 100644
--- a/src/tab/index.ts
+++ b/src/tab/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tab from './Tab';
 
-const Tab = installable(_Tab);
+const Tab = withInstall<typeof _Tab>(_Tab);
 
 export default Tab;
 export { Tab };
diff --git a/src/tabbar-item/index.ts b/src/tabbar-item/index.ts
index 02c9ad5eb..0540b7a56 100644
--- a/src/tabbar-item/index.ts
+++ b/src/tabbar-item/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _TabbarItem from './TabbarItem';
 
-const TabbarItem = installable(_TabbarItem);
+const TabbarItem = withInstall<typeof _TabbarItem>(_TabbarItem);
 
 export default TabbarItem;
 export { TabbarItem };
diff --git a/src/tabbar/index.ts b/src/tabbar/index.ts
index d89f633b9..f4327e856 100644
--- a/src/tabbar/index.ts
+++ b/src/tabbar/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tabbar from './Tabbar';
 
-const Tabbar = installable(_Tabbar);
+const Tabbar = withInstall<typeof _Tabbar>(_Tabbar);
 
 export default Tabbar;
 export { Tabbar };
diff --git a/src/tabs/index.ts b/src/tabs/index.ts
index 7260784ac..d67f4d5f2 100644
--- a/src/tabs/index.ts
+++ b/src/tabs/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tabs from './Tabs';
 
-const Tabs = installable(_Tabs);
+const Tabs = withInstall<typeof _Tabs>(_Tabs);
 
 export default Tabs;
 export { Tabs };
diff --git a/src/tag/index.ts b/src/tag/index.ts
index 102576304..55d17a012 100644
--- a/src/tag/index.ts
+++ b/src/tag/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tag from './Tag';
 
-const Tag = installable(_Tag);
+const Tag = withInstall<typeof _Tag>(_Tag);
 
 export default Tag;
 export { Tag };
diff --git a/src/toast/index.tsx b/src/toast/index.tsx
index 259f83f2b..ae5abfa3b 100644
--- a/src/toast/index.tsx
+++ b/src/toast/index.tsx
@@ -1,5 +1,5 @@
 import { ref, App, TeleportProps, getCurrentInstance } from 'vue';
-import { isObject, inBrowser, installable, ComponentInstance } from '../utils';
+import { isObject, inBrowser, withInstall, ComponentInstance } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanToast, { ToastType, ToastPosition } from './Toast';
 import type { LoadingType } from '../loading';
@@ -179,7 +179,7 @@ Toast.allowMultiple = (value = true) => {
 };
 
 Toast.install = (app: App) => {
-  app.use(installable(VanToast));
+  app.use(withInstall<typeof VanToast>(VanToast));
   app.config.globalProperties.$toast = Toast;
 };
 
diff --git a/src/tree-select/index.ts b/src/tree-select/index.ts
index afb3f0085..51e15029f 100644
--- a/src/tree-select/index.ts
+++ b/src/tree-select/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _TreeSelect from './TreeSelect';
 
-const TreeSelect = installable(_TreeSelect);
+const TreeSelect = withInstall<typeof _TreeSelect>(_TreeSelect);
 
 export default TreeSelect;
 export { TreeSelect };
diff --git a/src/uploader/index.ts b/src/uploader/index.ts
index 5b04e88ea..5838c2089 100644
--- a/src/uploader/index.ts
+++ b/src/uploader/index.ts
@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Uploader from './Uploader';
 
-const Uploader = installable(_Uploader);
+const Uploader = withInstall<typeof _Uploader>(_Uploader);
 
 export default Uploader;
 export { Uploader };
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ae5f47975..2cb1391df 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,6 @@
 export * from './base';
 export * from './create';
-export * from './installable';
+export * from './with-install';
 export * from './format/unit';
 export * from './format/number';
 export * from './format/string';
diff --git a/src/utils/with-install.ts b/src/utils/with-install.ts
new file mode 100644
index 000000000..3423366dd
--- /dev/null
+++ b/src/utils/with-install.ts
@@ -0,0 +1,17 @@
+import { App } from 'vue';
+import { camelize } from './format/string';
+
+export type WithInstall<T> = T & {
+  install(app: App): void;
+};
+
+// using any here because tsc will generate some weird results when using generics
+export function withInstall<T>(options: any): WithInstall<T> {
+  (options as Record<string, unknown>).install = (app: App) => {
+    const { name } = options as any;
+    app.component(name, options);
+    app.component(camelize(`-${name}`), options);
+  };
+
+  return options;
+}
diff --git a/yarn.lock b/yarn.lock
index 54697fd27..0bf24a10d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10462,9 +10462,9 @@ typedarray-to-buffer@^3.1.5:
     is-typedarray "^1.0.0"
 
 typescript@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.1.3.tgz?cache=0&sync_timestamp=1610349534592&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftypescript%2Fdownload%2Ftypescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
-  integrity sha1-UZ1YK9lMugz4k0x9joRn5HP1O7c=
+  version "4.2.3"
+  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.2.3.tgz?cache=0&sync_timestamp=1615105163051&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftypescript%2Fdownload%2Ftypescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
+  integrity sha1-OQYtgBmRLUNyYpjwlJPVmASMHOM=
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"