refactor: timeline to ts

components/timeline/Timeline.tsx

@@ -1,41 +1,38 @@
-import { inject, cloneVNode } from 'vue';
+import { inject, cloneVNode, defineComponent, ExtractPropTypes } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
-import {
+import { getOptionProps, getPropsData, filterEmpty, getComponent } from '../_util/props-util';
-  getOptionProps,
+import initDefaultProps from '../_util/props-util/initDefaultProps';
-  getPropsData,
+import TimelineItem, { TimeLineItemProps } from './TimelineItem';
-  initDefaultProps,
-  filterEmpty,
-  getComponent,
-} from '../_util/props-util';
-import TimelineItem from './TimelineItem';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import { defaultConfigProvider } from '../config-provider';
+import { tuple } from '../_util/type';
 
-export const TimelineProps = {
+export const timelineProps = {
   prefixCls: PropTypes.string,
   /** 指定最后一个幽灵节点是否存在或内容 */
   pending: PropTypes.any,
   pendingDot: PropTypes.string,
   reverse: PropTypes.looseBool,
-  mode: PropTypes.oneOf(['left', 'alternate', 'right', '']),
+  mode: PropTypes.oneOf(tuple('left', 'alternate', 'right', '')),
 };
 
-export default {
+export type TimelineProps = Partial<ExtractPropTypes<typeof timelineProps>>;
+
+export default defineComponent({
   name: 'ATimeline',
-  props: initDefaultProps(TimelineProps, {
+  props: initDefaultProps(timelineProps, {
     reverse: false,
     mode: '',
   }),
   setup() {
-    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
-      configProvider,
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
     const { prefixCls: customizePrefixCls, reverse, mode } = getOptionProps(this);
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('timeline', customizePrefixCls);
 
     const pendingDot = getComponent(this, 'pendingDot');
@@ -66,8 +63,8 @@ export default {
       ? [pendingItem, ...children.reverse()]
       : [...children, pendingItem];
 
-    const getPositionCls = (ele, idx) => {
+    const getPositionCls = (ele, idx: number) => {
-      const eleProps = getPropsData(ele);
+      const eleProps = getPropsData(ele) as TimeLineItemProps;
       if (mode === 'alternate') {
         if (eleProps.position === 'right') return `${prefixCls}-item-right`;
         if (eleProps.position === 'left') return `${prefixCls}-item-left`;
@@ -94,9 +91,6 @@ export default {
       });
     });
 
-    const timelineProps = {
+    return <ul class={classString}>{items}</ul>;
-      class: classString,
-    };
-    return <ul {...timelineProps}>{items}</ul>;
   },
-};
+});

components/timeline/TimelineItem.tsx

@@ -1,32 +1,35 @@
-import { inject } from 'vue';
+import { defineComponent, ExtractPropTypes, inject } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
+import { getOptionProps, getComponent } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { defaultConfigProvider } from '../config-provider';
+import { tuple } from '../_util/type';
 
-export const TimeLineItemProps = {
+export const timeLineItemProps = {
   prefixCls: PropTypes.string,
   color: PropTypes.string,
   dot: PropTypes.any,
   pending: PropTypes.looseBool,
-  position: PropTypes.oneOf(['left', 'right', '']).def(''),
+  position: PropTypes.oneOf(tuple('left', 'right', '')).def(''),
 };
 
-export default {
+export type TimeLineItemProps = Partial<ExtractPropTypes<typeof timeLineItemProps>>;
+
+export default defineComponent({
   name: 'ATimelineItem',
-  props: initDefaultProps(TimeLineItemProps, {
+  props: initDefaultProps(timeLineItemProps, {
     color: 'blue',
     pending: false,
   }),
   setup() {
-    const configProvider = inject('configProvider', defaultConfigProvider);
     return {
-      configProvider,
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   render() {
     const { prefixCls: customizePrefixCls, color = '', pending } = getOptionProps(this);
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('timeline', customizePrefixCls);
 
     const dot = getComponent(this, 'dot');
@@ -55,4 +58,4 @@ export default {
       </li>
     );
   },
-};
+});

components/timeline/index.tsx

@@ -1,3 +1,4 @@
+import { App } from 'vue';
 import Timeline from './Timeline';
 import TimelineItem from './TimelineItem';
 
@@ -7,10 +8,12 @@ export { TimeLineItemProps } from './TimelineItem';
 Timeline.Item = TimelineItem;
 
 /* istanbul ignore next */
-Timeline.install = function(app) {
+Timeline.install = function(app: App) {
   app.component(Timeline.name, Timeline);
   app.component(TimelineItem.name, TimelineItem);
   return app;
 };
 
-export default Timeline;
+export default Timeline as typeof Timeline & {
+  readonly Item: typeof TimelineItem;
+};