refactor: skeleton to ts

components/skeleton/Avatar.tsx

@@ -1,16 +1,23 @@
+import { defineComponent, ExtractPropTypes } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps } from '../_util/props-util';
+import { tuple } from '../_util/type';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 
 const skeletonAvatarProps = {
   prefixCls: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.oneOf(['large', 'small', 'default']), PropTypes.number]),
-  shape: PropTypes.oneOf(['circle', 'square']),
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf(tuple('large', 'small', 'default')),
+    PropTypes.number,
+  ]),
+  shape: PropTypes.oneOf(tuple('circle', 'square')),
 };
 
 export const SkeletonAvatarProps = PropTypes.shape(skeletonAvatarProps).loose;
 
-const Avatar = {
+export type ISkeletonAvatarProps = Partial<ExtractPropTypes<typeof skeletonAvatarProps>>;
+
+const Avatar = defineComponent({
   props: initDefaultProps(skeletonAvatarProps, {
     size: 'large',
   }),
@@ -38,6 +45,6 @@ const Avatar = {
 
     return <span class={classNames(prefixCls, sizeCls, shapeCls)} style={sizeStyle} />;
   },
-};
+});
 
 export default Avatar;

components/skeleton/Paragraph.tsx

@@ -1,3 +1,4 @@
+import { defineComponent, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 
 const widthUnit = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
@@ -10,10 +11,12 @@ const skeletonParagraphProps = {
 
 export const SkeletonParagraphProps = PropTypes.shape(skeletonParagraphProps);
 
-const Paragraph = {
+export type ISkeletonParagraphProps = Partial<ExtractPropTypes<typeof skeletonParagraphProps>>;
+
+const Paragraph = defineComponent({
   props: skeletonParagraphProps,
   methods: {
-    getWidth(index) {
+    getWidth(index: number) {
       const { width, rows = 2 } = this;
       if (Array.isArray(width)) {
         return width[index];
@@ -33,6 +36,6 @@ const Paragraph = {
     });
     return <ul class={prefixCls}>{rowList}</ul>;
   },
-};
+});
 
 export default Paragraph;

components/skeleton/Title.tsx

@@ -1,3 +1,4 @@
+import { defineComponent, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 
 const skeletonTitleProps = {
@@ -7,13 +8,15 @@ const skeletonTitleProps = {
 
 export const SkeletonTitleProps = PropTypes.shape(skeletonTitleProps);
 
-const Title = {
+export type ISkeletonTitleProps = Partial<ExtractPropTypes<typeof skeletonTitleProps>>;
+
+const Title = defineComponent({
   props: skeletonTitleProps,
   render() {
     const { prefixCls, width } = this.$props;
     const zWidth = typeof width === 'number' ? `${width}px` : width;
     return <h3 class={prefixCls} style={{ width: zWidth }} />;
   },
-};
+});
 
 export default Title;

components/skeleton/index.tsx

@@ -1,11 +1,11 @@
-import { inject } from 'vue';
+import { defineComponent, inject, App } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { initDefaultProps, hasProp } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import Avatar, { SkeletonAvatarProps } from './Avatar';
-import Title, { SkeletonTitleProps } from './Title';
-import Paragraph, { SkeletonParagraphProps } from './Paragraph';
+import Avatar, { SkeletonAvatarProps, ISkeletonAvatarProps } from './Avatar';
+import Title, { SkeletonTitleProps, ISkeletonTitleProps } from './Title';
+import Paragraph, { SkeletonParagraphProps, ISkeletonParagraphProps } from './Paragraph';
 
 export const SkeletonProps = {
   active: PropTypes.looseBool,
@@ -23,14 +23,14 @@ export const SkeletonProps = {
   ),
 };
 
-function getComponentProps(prop) {
+function getComponentProps<T>(prop: T | boolean | undefined): T | {} {
   if (prop && typeof prop === 'object') {
     return prop;
   }
   return {};
 }
 
-function getAvatarBasicProps(hasTitle, hasParagraph) {
+function getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): ISkeletonAvatarProps {
   if (hasTitle && !hasParagraph) {
     return { shape: 'square' };
   }
@@ -38,7 +38,7 @@ function getAvatarBasicProps(hasTitle, hasParagraph) {
   return { shape: 'circle' };
 }
 
-function getTitleBasicProps(hasAvatar, hasParagraph) {
+function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): ISkeletonTitleProps {
   if (!hasAvatar && hasParagraph) {
     return { width: '38%' };
   }
@@ -50,8 +50,8 @@ function getTitleBasicProps(hasAvatar, hasParagraph) {
   return {};
 }
 
-function getParagraphBasicProps(hasAvatar, hasTitle) {
-  const basicProps = {};
+function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): ISkeletonParagraphProps {
+  const basicProps: ISkeletonParagraphProps = {};
 
   // Width
   if (!hasAvatar || !hasTitle) {
@@ -68,7 +68,7 @@ function getParagraphBasicProps(hasAvatar, hasTitle) {
   return basicProps;
 }
 
-const Skeleton = {
+const Skeleton = defineComponent({
   name: 'ASkeleton',
   props: initDefaultProps(SkeletonProps, {
     avatar: false,
@@ -89,7 +89,7 @@ const Skeleton = {
       paragraph,
       active,
     } = this.$props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
     if (loading || !hasProp(this, 'loading')) {
@@ -159,12 +159,13 @@ const Skeleton = {
         </div>
       );
     }
-    return this.$slots.default && this.$slots.default();
+    return this.$slots.default?.();
   },
-};
+});
 /* istanbul ignore next */
-Skeleton.install = function(app) {
+Skeleton.install = function(app: App) {
   app.component(Skeleton.name, Skeleton);
   return app;
 };
+
 export default Skeleton;