fix: app.use type error (#3079)

Author: Amour1688

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;
+  };