feat: 处理组件tsc问题 (#1922)

src/packages/__VUE/addresslist/index.taro.vue

@@ -96,7 +96,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
-    const dataArray = ref([]);
+    const dataArray = ref([]) as any;
     const dataInfo = reactive({
       id: 2,
       addressName: '姓名',

src/packages/__VUE/addresslist/index.vue

@@ -96,7 +96,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
-    const dataArray = ref([]);
+    const dataArray = ref([]) as any;
     const dataInfo = reactive({
       id: 2,
       addressName: '姓名',

src/packages/__VUE/avatar/index.taro.vue

@@ -30,7 +30,7 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, onMounted, computed, inject, reactive, ref } from 'vue';
+import { toRefs, onMounted, computed, inject, reactive, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('avatar');
 export default create({
@@ -69,7 +69,7 @@ export default create({
     const { size, shape, bgColor, color, icon } = toRefs(props);
     const sizeValue = ['large', 'normal', 'small'];
     const avatarGroup: any = inject('avatarGroup', null);
-    const avatarRef = ref(null);
+    const avatarRef = ref(null) as Ref;
     const visible = reactive({
       lightTheme: false
     });
@@ -82,7 +82,6 @@ export default create({
     onMounted(() => {
       const children = avatarGroup?.avatarGroupRef?.value?.children;
       if (children) {
-        // console.log('parent', avatarGroup);
         avatarLength(children);
       }
     });
@@ -115,7 +114,7 @@ export default create({
     });
 
     const iconStyles = computed(() => {
-      return !!icon.value ? icon.value : '';
+      return icon?.value ? icon.value : '';
     });
 
     const isShowText = computed(() => {
@@ -136,12 +135,12 @@ export default create({
       }
     };
 
-    const activeAvatar = (event: any) => {
+    const activeAvatar = (event: MouseEvent) => {
       emit('active-avatar', event);
     };
 
-    const onError = (event: any) => {
-      emit('onError', event);
+    const onError = () => {
+      emit('onError');
     };
 
     return {

src/packages/__VUE/avatar/index.vue

@@ -30,7 +30,7 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, onMounted, computed, inject, reactive, ref } from 'vue';
+import { toRefs, onMounted, computed, inject, reactive, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('avatar');
 export default create({
@@ -69,7 +69,7 @@ export default create({
     const { size, shape, bgColor, color, icon } = toRefs(props);
     const sizeValue = ['large', 'normal', 'small'];
     const avatarGroup: any = inject('avatarGroup', null);
-    const avatarRef = ref(null);
+    const avatarRef = ref(null) as Ref;
     const visible = reactive({
       lightTheme: false
     });
@@ -82,7 +82,6 @@ export default create({
     onMounted(() => {
       const children = avatarGroup?.avatarGroupRef?.value?.children;
       if (children) {
-        // console.log('children', children);
         avatarLength(children);
       }
     });
@@ -115,7 +114,7 @@ export default create({
     });
 
     const iconStyles = computed(() => {
-      return !!icon.value ? icon.value : '';
+      return icon?.value ? icon.value : '';
     });
 
     const isShowText = computed(() => {
@@ -141,8 +140,8 @@ export default create({
       emit('active-avatar', event);
     };
 
-    const onError = (event: MouseEvent) => {
-      emit('onError', event);
+    const onError = () => {
+      emit('onError');
     };
 
     return {

src/packages/__VUE/category/index.taro.vue

@@ -17,15 +17,15 @@
   </div>
 </template>
 <script lang="ts">
-import { Ref, ref, toRefs, warn, watch, onMounted } from 'vue';
+import { PropType, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('category');
 
-//经典分类
-//商品池
-//自定义
+export type CategoryType = {
+  catName?: string;
+  [key: string]: any;
+};
 
-interface props {}
 export default create({
   props: {
     //分类模式
@@ -36,7 +36,7 @@ export default create({
 
     //左侧导航栏
     category: {
-      type: Array,
+      type: Array as PropType<CategoryType>,
       default: () => []
     }
   },
@@ -50,8 +50,6 @@ export default create({
       emit('change', index);
     };
 
-    onMounted(() => {});
-
     return {
       getChildList,
       checkIndex,

src/packages/__VUE/category/index.vue

@@ -7,7 +7,7 @@
             :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
             @click="getChildList(index)"
           >
-            {{ item?.catName }}
+            {{ item.catName }}
           </div>
         </div>
       </div>
@@ -17,15 +17,15 @@
   </div>
 </template>
 <script lang="ts">
-import { Ref, ref, toRefs, warn, watch, onMounted } from 'vue';
+import { PropType, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('category');
 
-//经典分类
-//商品池
-//自定义
+export type CategoryType = {
+  catName?: string;
+  [key: string]: any;
+};
 
-interface props {}
 export default create({
   props: {
     //分类模式
@@ -33,11 +33,10 @@ export default create({
       type: String,
       default: 'classify'
     },
-
     //左侧导航栏
     category: {
-      type: Array,
-      default: () => []
+      type: Array as PropType<CategoryType>,
+      default: []
     }
   },
 
@@ -50,8 +49,6 @@ export default create({
       emit('change', index);
     };
 
-    onMounted(() => {});
-
     return {
       getChildList,
       checkIndex,

src/packages/__VUE/categorypane/index.taro.vue

@@ -39,22 +39,27 @@
     <!-- 自定义 -->
 
     <div v-if="type == 'custom'" class="nut-categorypane__selfItemList">
-      <div v-for="(sku, key) in customCategory" class="nut-categorypane__skuName" :key="key" @click="onChange()">
+      <div v-for="(sku, key) in customCategory" class="nut-categorypane__skuName" :key="key" @click="onChange(sku)">
         {{ sku?.catName }}
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { Ref, ref, toRefs, warn, watch, onMounted } from 'vue';
+import { PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('category-pane');
 
-//经典分类
-//商品池
-//自定义
+export type ChildType = {
+  catName?: string;
+  catType?: number;
+  [key: string]: any;
+};
+export type CustomType = {
+  catName?: string;
+  [key: string]: any;
+};
 
-interface props {}
 export default create({
   props: {
     //分类模式
@@ -65,19 +70,19 @@ export default create({
 
     //右侧导航数据
     categoryChild: {
-      type: Array,
+      type: Array as PropType<ChildType>,
       default: () => []
     },
 
     //模式传入自定义数据
     customCategory: {
-      type: Array,
+      type: Array as PropType<CustomType>,
       default: () => []
     }
   },
 
   setup(props, { emit }) {
-    const onChange = (sku: any) => {
+    const onChange = (sku: string) => {
       emit('onChange', sku);
     };
 

src/packages/__VUE/categorypane/index.vue

@@ -46,15 +46,20 @@
   </div>
 </template>
 <script lang="ts">
-import { Ref, ref, toRefs, warn, watch, onMounted } from 'vue';
+import { PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('category-pane');
 
-//经典分类
-//商品池
-//自定义
+export type ChildType = {
+  catName?: string;
+  catType?: number;
+  [key: string]: any;
+};
+export type CustomType = {
+  catName?: string;
+  [key: string]: any;
+};
 
-interface props {}
 export default create({
   props: {
     //分类模式
@@ -65,19 +70,19 @@ export default create({
 
     //右侧导航数据
     categoryChild: {
-      type: Array,
+      type: Array as PropType<ChildType>,
       default: () => []
     },
 
     //模式传入自定义数据
     customCategory: {
-      type: Array,
+      type: Array as PropType<CustomType>,
       default: () => []
     }
   },
 
   setup(props, { emit }) {
-    const onChange = (sku: any) => {
+    const onChange = (sku: string) => {
       emit('onChange', sku);
     };
 

src/packages/__VUE/navbar/index.taro.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, computed, toRefs, ref } from 'vue';
+import { onMounted, computed, toRefs, ref, ComputedRef } from 'vue';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
@@ -84,7 +84,7 @@ export default create({
       };
     });
 
-    const styles = computed(() => {
+    const styles: ComputedRef = computed(() => {
       return {
         zIndex: zIndex.value
       };

src/packages/__VUE/navbar/index.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, computed, toRefs, ref, nextTick } from 'vue';
+import { onMounted, computed, toRefs, ref, nextTick, ComputedRef, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('navbar');
 export default create({
@@ -71,9 +71,9 @@ export default create({
   emits: ['on-click-back', 'on-click-title', 'on-click-icon', 'on-click-right'],
   setup(props, { emit }) {
     const { border, fixed, safeAreaInsetTop, placeholder, zIndex } = toRefs(props);
-    const navBarWrap = ref(null);
-    const navBarHtml = ref(null);
-    let navHeight = ref(0);
+    const navBarWrap = ref(null) as Ref;
+    const navBarHtml = ref<HTMLElement | null>(null);
+    let navHeight = ref();
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -84,7 +84,7 @@ export default create({
       };
     });
 
-    const styles = computed(() => {
+    const styles: ComputedRef = computed(() => {
       return {
         zIndex: zIndex.value
       };
@@ -93,8 +93,8 @@ export default create({
     onMounted(() => {
       if (fixed.value && placeholder.value) {
         nextTick(() => {
-          navHeight = navBarHtml?.value?.getBoundingClientRect().height;
-          navBarWrap.value.style.height = navHeight + 'px';
+          navHeight.value = navBarHtml?.value?.getBoundingClientRect().height;
+          navBarWrap.value.style.height = navHeight.value + 'px';
         });
       }
     });

src/packages/__VUE/price/demo.vue

@@ -13,7 +13,7 @@
     </nut-cell-group>
     <h2>{{ translate('title2') }}</h2>
     <nut-cell>
-      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="8888" :decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>

src/packages/__VUE/price/doc.en-US.md

@@ -39,7 +39,7 @@ app.use(Price);
 
 ``` html
 <template>
-    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888" :decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
 </template>
 ```
 
@@ -113,7 +113,7 @@ app.use(Price);
 | price          | Price                                                      | Number ｜ String | 0       |
 | need-symbol    | Add symbol                                                 | Boolean          | true   |
 | symbol         | Symbol type                                                | String           | &yen;  |
-| decimal-digits | Decimal digits                                             | Number ｜ String | 2      |
+| decimal-digits | Decimal digits                                             | Number | 2      |
 | thousands      | Thousands separation                                       | Boolean          | false  |
 | position       | The symbol appear before or after the price，`before`、`after` | String           | before |
 | size           | Size，`large`、`normal`、`small`                            | String           | large |

src/packages/__VUE/price/doc.md

@@ -39,7 +39,7 @@ app.use(Price);
 
 ``` html
 <template>
-    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888" :decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
 </template>
 ```
 
@@ -113,7 +113,7 @@ app.use(Price);
 | price          | 价格数量                                | Number ｜ String | 0      |
 | need-symbol    | 是否需要加上 symbol 符号                 | Boolean          | true   |
 | symbol         | 符号类型                                | String           | &yen;  |
-| decimal-digits | 小数位位数                              | Number ｜ String  | 2     |
+| decimal-digits | 小数位位数                              | Number  | 2     |
 | thousands      | 是否按照千分号形式显示                    | Boolean          | false  |
 | position       | 符号显示在价格前或者后，`before`、`after`  | String           | before |
 | size           | 价格尺寸，`large`、`normal`、`small`     | String           | large |

src/packages/__VUE/price/index.taro.vue

@@ -40,7 +40,7 @@ export default create({
       default: '¥'
     },
     decimalDigits: {
-      type: [Number, String],
+      type: Number,
       default: 2
     },
     thousands: {

src/packages/__VUE/price/index.vue

@@ -42,7 +42,7 @@ export default create({
       default: '¥'
     },
     decimalDigits: {
-      type: [Number, String],
+      type: Number,
       default: 2
     },
     thousands: {

src/sites/mobile-taro/vue/src/exhibition/pages/price/index.vue

@@ -13,7 +13,7 @@
     </nut-cell-group>
     <h2>不保留小数</h2>
     <nut-cell>
-      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="8888" :decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>调整 symbol 符号位置</h2>
     <nut-cell>