fix: app.use type error #3076

components/_util/type.ts

@@ -1,4 +1,4 @@
-import { PropType, VNodeChild } from 'vue';
+import { App, PropType, VNodeChild, Plugin } from 'vue';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
@@ -31,3 +31,12 @@ export interface PropOptions<T = any, D = T> {
 }
 
 export type VueNode = VNodeChild | JSX.Element;
+
+export const withInstall = <T>(comp: T) => {
+  const c = comp as any;
+  c.install = function(app: App) {
+    app.component(c.displayName || c.name, comp);
+  };
+
+  return comp as T & Plugin;
+};

components/affix/index.tsx

@@ -1,4 +1,4 @@
-import { App, CSSProperties, defineComponent, inject } from 'vue';
+import { CSSProperties, defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
@@ -7,6 +7,7 @@ import BaseMixin from '../_util/BaseMixin';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
+import { withInstall } from '../_util/type';
 import {
   addObserveTarget,
   removeObserveTarget,
@@ -265,10 +266,5 @@ const Affix = defineComponent({
     );
   },
 });
-/* istanbul ignore next */
-Affix.install = function(app: App) {
-  app.component(Affix.name, Affix);
-  return app;
-};
 
-export default Affix;
+export default withInstall(Affix);

components/alert/index.tsx

@@ -1,4 +1,4 @@
-import { inject, cloneVNode, defineComponent, App } from 'vue';
+import { inject, cloneVNode, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -14,7 +14,7 @@ import PropTypes from '../_util/vue-types';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 function noop() {}
 
@@ -161,10 +161,4 @@ const Alert = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Alert.install = function(app: App) {
-  app.component(Alert.name, Alert);
-  return app;
-};
-
-export default Alert;
+export default withInstall(Alert);

components/anchor/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Anchor from './Anchor';
 import AnchorLink from './AnchorLink';
 
@@ -10,6 +10,8 @@ Anchor.install = function(app: App) {
   app.component(Anchor.Link.name, Anchor.Link);
   return app;
 };
-export default Anchor as typeof Anchor & {
-  readonly Link: typeof AnchorLink;
-};
+
+export default Anchor as typeof Anchor &
+  Plugin & {
+    readonly Link: typeof AnchorLink;
+  };

components/auto-complete/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, provide } from 'vue';
+import { App, defineComponent, inject, provide, Plugin } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
@@ -147,7 +147,8 @@ AutoComplete.install = function(app: App) {
   return app;
 };
 
-export default AutoComplete as typeof AutoComplete & {
-  readonly Option: typeof Option;
-  readonly OptGroup: typeof OptGroup;
-};
+export default AutoComplete as typeof AutoComplete &
+  Plugin & {
+    readonly Option: typeof Option;
+    readonly OptGroup: typeof OptGroup;
+  };

components/avatar/index.ts

@@ -1,10 +1,4 @@
-import { App } from 'vue';
 import Avatar from './Avatar';
+import { withInstall } from '../_util/type';
 
-/* istanbul ignore next */
-Avatar.install = function(app: App) {
-  app.component(Avatar.name, Avatar);
-  return app;
-};
-
-export default Avatar;
+export default withInstall(Avatar);

components/back-top/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, nextTick } from 'vue';
+import { defineComponent, inject, nextTick } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import backTopTypes from './backTopTypes';
@@ -8,6 +8,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
+import { withInstall } from '../_util/type';
 
 function getDefaultTarget() {
   return window;
@@ -100,10 +101,4 @@ const BackTop = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-BackTop.install = function(app: App) {
-  app.component(BackTop.name, BackTop);
-  return app;
-};
-
-export default BackTop;
+export default withInstall(BackTop);

components/badge/index.ts

@@ -1,10 +1,4 @@
-import { App } from 'vue';
 import Badge from './Badge';
+import { withInstall } from '../_util/type';
 
-/* istanbul ignore next */
-Badge.install = function(app: App) {
-  app.component(Badge.name, Badge);
-  return app;
-};
-
-export default Badge;
+export default withInstall(Badge);

components/breadcrumb/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
@@ -14,7 +14,8 @@ Breadcrumb.install = function(app: App) {
   return app;
 };
 
-export default Breadcrumb as typeof Breadcrumb & {
-  readonly Item: typeof BreadcrumbItem;
-  readonly Separator: typeof BreadcrumbSeparator;
-};
+export default Breadcrumb as typeof Breadcrumb &
+  Plugin & {
+    readonly Item: typeof BreadcrumbItem;
+    readonly Separator: typeof BreadcrumbSeparator;
+  };

components/button/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Button from './button';
 import ButtonGroup from './button-group';
 
@@ -11,6 +11,7 @@ Button.install = function(app: App) {
   return app;
 };
 
-export default Button as typeof Button & {
-  readonly Group: typeof ButtonGroup;
-};
+export default Button as typeof Button &
+  Plugin & {
+    readonly Group: typeof ButtonGroup;
+  };

components/calendar/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, hasProp } from '../_util/props-util';
@@ -10,7 +10,7 @@ import interopDefault from '../_util/interopDefault';
 import { defaultConfigProvider } from '../config-provider';
 import enUS from './locale/en_US';
 import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 function noop() {
   return null;
@@ -252,10 +252,6 @@ const Calendar = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Calendar.install = function(app: App) {
-  app.component(Calendar.name, Calendar);
-  return app;
-};
 export { HeaderProps } from './Header';
-export default Calendar;
+
+export default withInstall(Calendar);

components/card/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Card from './Card';
 import Meta from './Meta';
 import Grid from './Grid';
@@ -14,7 +14,8 @@ Card.install = function(app: App) {
   return app;
 };
 
-export default Card as typeof Card & {
-  readonly Meta: typeof Meta;
-  readonly Grid: typeof Grid;
-};
+export default Card as typeof Card &
+  Plugin & {
+    readonly Meta: typeof Meta;
+    readonly Grid: typeof Grid;
+  };

components/carousel/index.tsx

@@ -1,12 +1,12 @@
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import debounce from 'lodash-es/debounce';
 import hasProp, { getComponent } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 import classNames from '../_util/classNames';
 import SlickCarousel from '../vc-slick/src';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 // Carousel
 export const CarouselProps = {
@@ -164,10 +164,4 @@ const Carousel = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Carousel.install = function(app: App) {
-  app.component(Carousel.name, Carousel);
-  return app;
-};
-
-export default Carousel;
+export default withInstall(Carousel);

components/cascader/index.tsx

@@ -1,4 +1,4 @@
-import { App, inject, provide, PropType, defineComponent, CSSProperties } from 'vue';
+import { inject, provide, PropType, defineComponent, CSSProperties } from 'vue';
 import PropTypes from '../_util/vue-types';
 import VcCascader from '../vc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
@@ -23,7 +23,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
 import warning from '../_util/warning';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple, VueNode } from '../_util/type';
+import { tuple, VueNode, withInstall } from '../_util/type';
 import { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 export interface CascaderOptionType {
@@ -611,9 +611,4 @@ const Cascader = defineComponent({
   },
 });
 
-Cascader.install = function(app: App) {
-  app.component(Cascader.name, Cascader);
-  return app;
-};
-
-export default Cascader;
+export default withInstall(Cascader);

components/checkbox/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './Group';
 
@@ -11,6 +11,7 @@ Checkbox.install = function(app: App) {
   return app;
 };
 
-export default Checkbox as typeof Checkbox & {
-  readonly Group: typeof CheckboxGroup;
-};
+export default Checkbox as typeof Checkbox &
+  Plugin & {
+    readonly Group: typeof CheckboxGroup;
+  };

components/col/index.ts

@@ -1,9 +1,4 @@
-import { App } from 'vue';
 import { Col } from '../grid';
-/* istanbul ignore next */
-Col.install = function(app: App) {
-  app.component(Col.name, Col);
-  return app;
-};
+import { withInstall } from '../_util/type';
 
-export default Col;
+export default withInstall(Col);

components/collapse/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Collapse from './Collapse';
 import CollapsePanel from './CollapsePanel';
 
@@ -11,6 +11,7 @@ Collapse.install = function(app: App) {
   return app;
 };
 
-export default Collapse as typeof Collapse & {
-  readonly Panel: typeof CollapsePanel;
-};
+export default Collapse as typeof Collapse &
+  Plugin & {
+    readonly Panel: typeof CollapsePanel;
+  };

components/comment/index.tsx

@@ -1,8 +1,8 @@
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropsTypes from '../_util/vue-types';
 import { getComponent, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import { VueNode } from '../_util/type';
+import { VueNode, withInstall } from '../_util/type';
 export const CommentProps = {
   actions: PropsTypes.array,
   /** The element to display as the comment author. */
@@ -93,9 +93,4 @@ const Comment = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Comment.install = function(app: App) {
-  app.component(Comment.name, Comment);
-  return app;
-};
-export default Comment;
+export default withInstall(Comment);

components/config-provider/index.tsx

@@ -1,9 +1,10 @@
-import { reactive, provide, VNodeTypes, PropType, defineComponent, App, watch } from 'vue';
+import { reactive, provide, VNodeTypes, PropType, defineComponent, watch } from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
 
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { withInstall } from '../_util/type';
 
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
 
@@ -168,10 +169,4 @@ export const defaultConfigProvider: ConfigConsumerProps = {
   renderEmpty: defaultRenderEmpty,
 };
 
-/* istanbul ignore next */
-ConfigProvider.install = function(app: App) {
-  app.component(ConfigProvider.name, ConfigProvider);
-  return app;
-};
-
-export default ConfigProvider;
+export default withInstall(ConfigProvider);