[improvement] Sku: tsx (#2801)

packages/sku/components/SkuActions.tsx

@@ -2,10 +2,25 @@ import { use } from '../../utils';
 import { inherit } from '../../utils/functional';
 import Button from '../../button';
 
+// Types
+import Vue, { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/use/sfc';
+
+export type SkuActionsProps = {
+  buyText?: string;
+  skuEventBus: Vue;
+  showAddCartBtn?: boolean;
+};
+
 const [sfc, bem] = use('sku-actions');
 
-function SkuActions(h, props, slots, ctx) {
-  const emit = name => () => {
+function SkuActions(
+  h: CreateElement,
+  props: SkuActionsProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuActionsProps>
+) {
+  const emit = (name: string) => () => {
     props.skuEventBus.$emit(name);
   };
 
@@ -30,4 +45,4 @@ SkuActions.props = {
   showAddCartBtn: Boolean
 };
 
-export default sfc(SkuActions);
+export default sfc<SkuActionsProps>(SkuActions);

packages/sku/components/SkuHeader.tsx

@@ -2,9 +2,21 @@ import { use } from '../../utils';
 import { inherit } from '../../utils/functional';
 import Icon from '../../icon';
 
+// Types
+import Vue, { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/use/sfc';
+import { SkuData, SkuGoodsData, SelectedSkuData } from '../type';
+
+export type SkuHeaderProps = {
+  sku: SkuData;
+  goods: SkuGoodsData;
+  skuEventBus: Vue;
+  selectedSku: SelectedSkuData;
+};
+
 const [sfc, bem] = use('sku-header');
 
-function getSkuImg(sku, selectedSku) {
+function getSkuImg(sku: SkuData, selectedSku: SelectedSkuData) {
   const id = selectedSku.s1;
 
   if (id) {
@@ -19,7 +31,12 @@ function getSkuImg(sku, selectedSku) {
   }
 }
 
-function SkuHeader(h, props, slots, ctx) {
+function SkuHeader(
+  h: CreateElement,
+  props: SkuHeaderProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuHeaderProps>
+) {
   const { sku, goods, skuEventBus, selectedSku } = props;
   const goodsImg = getSkuImg(sku, selectedSku) || goods.picture;
 
@@ -54,4 +71,4 @@ SkuHeader.props = {
   selectedSku: Object
 };
 
-export default sfc(SkuHeader);
+export default sfc<SkuHeaderProps>(SkuHeader);

packages/sku/components/SkuRow.js

@@ -1,19 +0,0 @@
-import { use } from '../../utils';
-import { inherit } from '../../utils/functional';
-
-const [sfc, bem] = use('sku-row');
-
-function SkuRow(h, props, slots, ctx) {
-  return (
-    <div class={bem()} {...inherit(ctx)}>
-      <div class={bem('title')}>{props.skuRow.k}：</div>
-      {slots.default && slots.default()}
-    </div>
-  );
-}
-
-SkuRow.props = {
-  skuRow: Object
-};
-
-export default sfc(SkuRow);

packages/sku/components/SkuRow.tsx

@@ -0,0 +1,33 @@
+import { use } from '../../utils';
+import { inherit } from '../../utils/functional';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/use/sfc';
+import { SkuTreeItemData } from '../type';
+
+export type SkuRowProps = {
+  skuRow: SkuTreeItemData;
+};
+
+const [sfc, bem] = use('sku-row');
+
+function SkuRow(
+  h: CreateElement,
+  props: SkuRowProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuRowProps>
+) {
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      <div class={bem('title')}>{props.skuRow.k}：</div>
+      {slots.default && slots.default()}
+    </div>
+  );
+}
+
+SkuRow.props = {
+  skuRow: Object
+};
+
+export default sfc<SkuRowProps>(SkuRow);