refactor: upload to ts

components/upload/Dragger.tsx

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { getOptionProps, getSlot } from '../_util/props-util';
 import Upload from './Upload';
 import { UploadProps } from './interface';
 
-export default {
+export default defineComponent({
   name: 'AUploadDragger',
   inheritAttrs: false,
   props: UploadProps,
@@ -14,8 +15,8 @@ export default {
       ...restProps,
       ...restAttrs,
       type: 'drag',
-      style: { ...style, height },
+      style: { ...(style as any), height },
-    };
+    } as any;
     return <Upload {...draggerProps}>{getSlot(this)}</Upload>;
   },
-};
+});

components/upload/Upload.tsx

@@ -3,7 +3,8 @@ import uniqBy from 'lodash-es/uniqBy';
 import findIndex from 'lodash-es/findIndex';
 import VcUpload from '../vc-upload';
 import BaseMixin from '../_util/BaseMixin';
-import { getOptionProps, initDefaultProps, hasProp, getSlot } from '../_util/props-util';
+import { getOptionProps, hasProp, getSlot } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import { defaultConfigProvider } from '../config-provider';
@@ -11,12 +12,10 @@ import Dragger from './Dragger';
 import UploadList from './UploadList';
 import { UploadProps } from './interface';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
-import { inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import { getDataAndAria } from '../vc-tree/src/util';
 
-export { UploadProps };
+export default defineComponent({
-
-export default {
   name: 'AUpload',
   mixins: [BaseMixin],
   inheritAttrs: false,
@@ -35,12 +34,13 @@ export default {
   }),
   setup() {
     return {
+      upload: null,
+      progressTimer: null,
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   // recentUploadStatus: boolean | PromiseLike<any>;
   data() {
-    this.progressTimer = null;
     return {
       sFileList: this.fileList || this.defaultFileList || [],
       dragState: 'drop',
@@ -159,7 +159,7 @@ export default {
     },
     handleManualRemove(file) {
       if (this.$refs.uploadRef) {
-        this.$refs.uploadRef.abort(file);
+        (this.$refs.uploadRef as any).abort(file);
       }
       this.handleRemove(file);
     },
@@ -275,7 +275,7 @@ export default {
     if (type === 'drag') {
       const dragCls = classNames(prefixCls, {
         [`${prefixCls}-drag`]: true,
-        [`${prefixCls}-drag-uploading`]: fileList.some(file => file.status === 'uploading'),
+        [`${prefixCls}-drag-uploading`]: fileList.some((file: any) => file.status === 'uploading'),
         [`${prefixCls}-drag-hover`]: dragState === 'dragover',
         [`${prefixCls}-disabled`]: disabled,
       });
@@ -330,4 +330,4 @@ export default {
       </span>
     );
   },
-};
+});

components/upload/UploadList.tsx

@@ -1,4 +1,4 @@
-import { inject, Transition, TransitionGroup } from 'vue';
+import { defineComponent, inject, Transition, TransitionGroup, CSSProperties } from 'vue';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
@@ -17,7 +17,7 @@ import classNames from '../_util/classNames';
 import { UploadListProps } from './interface';
 import getTransitionGroupProps from '../_util/getTransitionGroupProps';
 
-export default {
+export default defineComponent({
   name: 'AUploadList',
   mixins: [BaseMixin],
   props: initDefaultProps(UploadListProps, {
@@ -206,7 +206,7 @@ export default {
             </span>,
             downloadOrDelete,
           ];
-      const style =
+      const style: CSSProperties | undefined =
         file.url || file.thumbUrl
           ? undefined
           : {
@@ -266,11 +266,14 @@ export default {
       [`${prefixCls}-list-${listType}`]: true,
     });
     const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
-    const transitionGroupProps = getTransitionGroupProps(`${prefixCls}-${animationDirection}`);
+    const transitionGroupProps = {
+      ...getTransitionGroupProps(`${prefixCls}-${animationDirection}`),
+      class: listClassNames,
+    };
     return (
-      <TransitionGroup {...transitionGroupProps} tag="div" class={listClassNames}>
+      <TransitionGroup {...transitionGroupProps} tag="div">
         {list}
       </TransitionGroup>
     );
   },
-};
+});

components/upload/index.tsx

@@ -1,3 +1,4 @@
+import { App } from 'vue';
 import Upload from './Upload';
 import Dragger from './Dragger';
 
@@ -6,10 +7,12 @@ export { UploadProps, UploadListProps, UploadChangeParam } from './interface';
 Upload.Dragger = Dragger;
 
 /* istanbul ignore next */
-Upload.install = function(app) {
+Upload.install = function(app: App) {
   app.component(Upload.name, Upload);
   app.component(Dragger.name, Dragger);
   return app;
 };
 
-export default Upload;
+export default Upload as typeof Upload & {
+  readonly Dragger: typeof Dragger;
+};

components/upload/interface.tsx

@@ -1,16 +1,19 @@
+import { tuple } from '../_util/type';
 import PropsTypes from '../_util/vue-types';
 
-export const UploadFileStatus = PropsTypes.oneOf([
+export const UploadFileStatus = PropsTypes.oneOf(
-  'error',
+  tuple('error', 'success', 'done', 'uploading', 'removed'),
-  'success',
+);
-  'done',
-  'uploading',
-  'removed',
-]);
 
-// export const HttpRequestHeader {
+export interface HttpRequestHeader {
-//   [key: string]: string;
+  [key: string]: string;
-// }
+}
+
+export interface VcFile extends File {
+  uid: string;
+  readonly lastModifiedDate: Date;
+  readonly webkitRelativePath: string;
+}
 
 // export const UploadFile = PropsTypes.shape({
 //   uid: PropsTypes.oneOfType([
@@ -60,20 +63,20 @@ export const UploadLocale = PropsTypes.shape({
 }).loose;
 
 export const UploadProps = {
-  type: PropsTypes.oneOf(['drag', 'select']),
+  type: PropsTypes.oneOf(tuple('drag', 'select')),
   name: PropsTypes.string,
   defaultFileList: PropsTypes.arrayOf(PropsTypes.custom(UploadFile)),
   fileList: PropsTypes.arrayOf(PropsTypes.custom(UploadFile)),
   action: PropsTypes.oneOfType([PropsTypes.string, PropsTypes.func]),
   directory: PropsTypes.looseBool,
   data: PropsTypes.oneOfType([PropsTypes.object, PropsTypes.func]),
-  method: PropsTypes.oneOf(['POST', 'PUT', 'post', 'put']),
+  method: PropsTypes.oneOf(tuple('POST', 'PUT', 'post', 'put')),
   headers: PropsTypes.object,
   showUploadList: PropsTypes.oneOfType([PropsTypes.looseBool, ShowUploadListInterface]),
   multiple: PropsTypes.looseBool,
   accept: PropsTypes.string,
   beforeUpload: PropsTypes.func,
-  listType: PropsTypes.oneOf(['text', 'picture', 'picture-card']),
+  listType: PropsTypes.oneOf(tuple('text', 'picture', 'picture-card')),
   // className: PropsTypes.string,
   remove: PropsTypes.func,
   supportServerRender: PropsTypes.looseBool,
@@ -101,7 +104,7 @@ export const UploadState = {
 };
 
 export const UploadListProps = {
-  listType: PropsTypes.oneOf(['text', 'picture', 'picture-card']),
+  listType: PropsTypes.oneOf(tuple('text', 'picture', 'picture-card')),
   // items: PropsTypes.arrayOf(UploadFile),
   items: PropsTypes.arrayOf(PropsTypes.custom(UploadFile)),
   // items: PropsTypes.any,