fix：ts类型修改 (#1914)

src/packages/__VUE/backtop/index.vue

@@ -51,7 +51,6 @@ export default create({
       startTime: 0,
       keepAlive: false
     });
-    let scrollEl: Window | HTMLElement = window;
     const classes = computed(() => {
       const prefixCls = componentName;
       return {

src/packages/__VUE/calendar/demo.vue

@@ -160,12 +160,10 @@
         :title="translate('please')"
       >
         <template v-slot:day="date">
-          <span>{{ date.date.day <= 9 ? '0' + date.date.day : date.date.day }}</span>
+          <span>{{ renderDate(date) }}</span>
         </template>
         <template v-slot:bottomInfo="date">
-          <span class="info">{{
-            date.date ? (date.date.day <= 10 ? '' : date.date.day <= 20 ? translate('mid') : '') : ''
-          }}</span>
+          <span class="info">{{ renderBottomDate(date) }}</span>
         </template>
       </nut-calendar>
     </div>
@@ -200,6 +198,7 @@ import { reactive, toRefs, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Utils from '@/packages/utils/date';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { CalendarRef, Day } from '../calendaritem/type';
 
 const { createDemo, translate } = createComponent('calendar');
 const initTranslate = () =>
@@ -253,18 +252,11 @@ const initTranslate = () =>
       selected: 'selected:'
     }
   });
-interface TestCalendarState {
+interface TestCalendarState extends TestCalendarStateVisible {
   isVisible: boolean;
   date: string;
   dateWeek: string;
-  isVisible1: boolean;
-  isVisible2: boolean;
-  isVisible3: boolean;
-  isVisible4: boolean;
-  isVisible5: boolean;
-  isVisible6: boolean;
-  isVisible7: boolean;
-  isVisible8: boolean;
+
   date1: string[];
   date2: string;
   date3: string;
@@ -274,11 +266,21 @@ interface TestCalendarState {
   date7: string[];
   date8: string;
 }
+interface TestCalendarStateVisible {
+  isVisible1: boolean;
+  isVisible2: boolean;
+  isVisible3: boolean;
+  isVisible4: boolean;
+  isVisible5: boolean;
+  isVisible6: boolean;
+  isVisible7: boolean;
+  isVisible8: boolean;
+}
 export default createDemo({
   props: {},
   setup() {
     initTranslate();
-    const calendarRef = ref(null);
+    const calendarRef = ref<null | CalendarRef>(null);
     const state: TestCalendarState = reactive({
       isVisible: false,
       date: '2022-02-01',
@@ -300,11 +302,11 @@ export default createDemo({
       isVisible7: false,
       isVisible8: false
     });
-    const openSwitch = (param: string) => {
+    const openSwitch = (param: keyof TestCalendarStateVisible) => {
       state[`${param}`] = true;
     };
 
-    const closeSwitch = (param: string) => {
+    const closeSwitch = (param: keyof TestCalendarStateVisible) => {
       state[`${param}`] = false;
     };
 
@@ -366,6 +368,12 @@ export default createDemo({
         calendarRef.value.scrollToDate('2022-04-01');
       }
     };
+    const renderDate = (date: { date: Day }) => {
+      return date.date.day <= 9 ? '0' + date.date.day : date.date.day;
+    };
+    const renderBottomDate = (date: { date: Day }) => {
+      return date.date ? (date.date.day <= 10 ? '' : date.date.day <= 20 ? translate('mid') : '') : '';
+    };
     return {
       ...toRefs(state),
       openSwitch,
@@ -384,7 +392,9 @@ export default createDemo({
       goDate,
       calendarRef,
       select,
-      translate
+      translate,
+      renderDate,
+      renderBottomDate
     };
   }
 });

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

@@ -90,6 +90,7 @@ import Popup from '../popup/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import Taro from '@tarojs/taro';
+import { CalendarRef } from '../calendaritem/type';
 
 export default create({
   components: {
@@ -182,7 +183,7 @@ export default create({
     });
     let show = ref(props.visible);
     // element refs
-    const calendarRef = ref<null | HTMLElement>(null);
+    const calendarRef = ref<null | CalendarRef>(null);
     const scrollToDate = (date: string) => {
       calendarRef.value?.scrollToDate(date);
     };

src/packages/__VUE/calendar/index.vue

@@ -86,15 +86,15 @@
   </nut-calendar-item>
 </template>
 <script lang="ts">
-import { PropType, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
 import CalendarItem from '../calendaritem/index.vue';
 import Popup from '../popup/index.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { CalendarRef } from '../calendaritem/type';
 
-type InputDate = string | string[];
 export default create({
   components: {
     [CalendarItem.name]: CalendarItem,
@@ -181,7 +181,7 @@ export default create({
       return slots.bottomInfo;
     });
     // element refs
-    const calendarRef = ref<null | HTMLElement>(null);
+    const calendarRef = ref<null | CalendarRef>(null);
     const scrollToDate = (date: string) => {
       calendarRef.value?.scrollToDate(date);
     };

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

@@ -75,8 +75,9 @@ import Taro from '@tarojs/taro';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import requestAniFrame from '@/packages/utils/raf';
-import { MonthInfo, Day } from './type';
+import { MonthInfo, Day, DateInfo } from './type';
 import NutScrollView from '../scrollView/index.taro.vue';
+import { isArray } from '@/packages/utils/util';
 const TARO_ENV = Taro.getEnv();
 
 export default create({
@@ -130,7 +131,8 @@ export default create({
     },
     defaultValue: {
       type: [String, Array],
-      default: null
+      default: null,
+      valid: (value: string | string[]) => value
     },
     startDate: {
       type: String,
@@ -166,7 +168,7 @@ export default create({
       return slots.bottomInfo;
     });
     // state
-    const state: import('./type').CalendarState = reactive({
+    const state: import('./type').CalendarTaroState = reactive({
       yearMonthTitle: '',
       defaultRange: [0, 1],
       compConthsDatas: [],
@@ -212,8 +214,8 @@ export default create({
       return Utils.isEqual(state.currDate[1], currDate);
     };
     const isMultiple = (currDate: string) => {
-      if (state.currDate.length > 0) {
-        return state.currDate.some((item: any) => {
+      if (isArray(state.currDate) && state.currDate.length > 0) {
+        return state.currDate.some((item: string) => {
           return Utils.isEqual(item, currDate);
         });
       } else {
@@ -277,9 +279,9 @@ export default create({
         days[3] = `${days[0]}-${days[1]}-${days[2]}`;
         days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
         if (type == 'multiple') {
-          if (state.currDate.length > 0) {
-            let hasIndex: any = '';
-            state.currDate.forEach((item: any, index: number) => {
+          if (isArray(state.currDate) && state.currDate.length > 0) {
+            let hasIndex = NaN;
+            state.currDate.forEach((item: string, index: number) => {
               if (item == days[3]) {
                 hasIndex = index;
               }
@@ -287,7 +289,7 @@ export default create({
             if (isFirst) {
               state.chooseData.push([...days]);
             } else {
-              if (hasIndex !== '') {
+              if (!isNaN(hasIndex)) {
                 state.currDate.splice(hasIndex, 1);
                 state.chooseData.splice(hasIndex, 1);
               } else {
@@ -350,11 +352,11 @@ export default create({
           month = month == 12 ? 1 : ++month;
           break;
       }
-      return [year, Utils.getNumTwoBit(month), Utils.getMonthDays(String(year), String(month))];
+      return [year + '', Utils.getNumTwoBit(month), Utils.getMonthDays(String(year), String(month)) + ''];
     };
 
     // 获取日期状态
-    const getDaysStatus = (days: number, type: string, dateInfo: any) => {
+    const getDaysStatus = (days: number, type: string, dateInfo: { year: string; month: string }) => {
       // 修复：当某个月的1号是周日时，月份下方会空出来一行
       let { year, month } = dateInfo;
       if (type == 'prev' && days >= 7) {
@@ -370,7 +372,13 @@ export default create({
       });
     };
     // 获取上一个月的最后一周天数，填充当月空白
-    const getPreDaysStatus = (days: number, type: string, dateInfo: any, preCurrMonthDays: number) => {
+    const getPreDaysStatus = (
+      days: number,
+      type: string,
+      dateInfo: { year: number; month: number },
+      preCurrMonthDays: number
+    ) => {
+      // 新增：自定义周起始日}, preCurrMonthDays: number) => {
       // 新增：自定义周起始日
       days = days - props.firstDayOfWeek;
       // 修复：当某个月的1号是周日时，月份下方会空出来一行
@@ -389,12 +397,12 @@ export default create({
       return months.slice(preCurrMonthDays - days);
     };
     // 获取月数据
-    const getMonth = (curData: any[], type: string) => {
+    const getMonth = (curData: string[], type: string) => {
       // 一号为周几
       const preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
 
-      let preMonth = curData[1] - 1;
-      let preYear = curData[0];
+      let preMonth = +curData[1] - 1;
+      let preYear = +curData[0];
       if (preMonth <= 0) {
         preMonth = 12;
         preYear += 1;
@@ -413,7 +421,9 @@ export default create({
         monthData: [
           ...(getPreDaysStatus(preMonthDays, 'prev', { month: preMonth, year: preYear }, preCurrMonthDays) as Day[]),
           ...(getDaysStatus(currMonthDays, 'curr', title) as Day[])
-        ]
+        ],
+        cssHeight: 0,
+        cssScrollHeight: 0
       };
       let titleHeight, itemHeight;
       if (TARO_ENV === Taro.ENV_TYPE.WEB) {
@@ -472,7 +482,8 @@ export default create({
 
       // 根据是否存在默认时间，初始化当前日期,
       if (props.defaultValue || (Array.isArray(props.defaultValue) && props.defaultValue.length > 0)) {
-        state.currDate = props.type != 'one' ? [...props.defaultValue] : props.defaultValue;
+        state.currDate =
+          props.type != 'one' ? ([...props.defaultValue] as string[]) : (props.defaultValue as string | string[]);
       }
       // 判断时间范围内存在多少个月
       const startDate = {
@@ -513,6 +524,7 @@ export default create({
       } else if (props.type == 'multiple' && Array.isArray(state.currDate)) {
         if (state.currDate.length > 0) {
           let defaultArr: string[] = [];
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           let obj: any = {};
           state.currDate.forEach((item: string) => {
             if (
@@ -565,7 +577,7 @@ export default create({
           chooseDay({ day: state.defaultData[2], type: 'curr' }, state.monthsData[state.currentIndex], true);
           chooseDay({ day: state.defaultData[5], type: 'curr' }, state.monthsData[lastCurrent], true);
         } else if (props.type == 'multiple') {
-          [...state.currDate].forEach((item: any) => {
+          [...state.currDate].forEach((item: string) => {
             let dateArr = splitDate(item);
             let current = state.currentIndex;
             state.monthsData.forEach((item, index) => {
@@ -656,7 +668,7 @@ export default create({
       scrollToDate
     });
     const setDefaultRange = (monthsNum: number, current: number) => {
-      let rangeArr: any[] = [];
+      let rangeArr: number[] = [];
       if (monthsNum >= 3) {
         if (current > 0 && current < monthsNum) {
           rangeArr = [current - 1, current + 3];
@@ -700,11 +712,14 @@ export default create({
       }
     };
     // 是否有是当前日期
-    const isCurrDay = (dateInfo: any) => {
-      const date = `${dateInfo.year}-${dateInfo.month}-${dateInfo.day < 10 ? '0' + dateInfo.day : dateInfo.day}`;
+    const isCurrDay = (dateInfo: DateInfo) => {
+      const date = `${dateInfo.year}-${dateInfo.month}-${
+        Number(dateInfo.day) < 10 ? '0' + dateInfo.day : dateInfo.day
+      }`;
       return Utils.isEqual(date, Utils.date2Str(new Date()));
     };
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const mothsViewScroll = (e: any) => {
       if (state.monthsData.length <= 1) {
         return;
@@ -723,39 +738,6 @@ export default create({
           current -= 1;
         }
       }
-      // else {
-      //   if (!viewHeight.value || viewHeight.value < 0) {
-      //     if (TARO_ENV === Taro.ENV_TYPE.ALIPAY) {
-      //       if (months.value) {
-      //         viewHeight.value = months.value.clientHeight;
-      //       }
-      //     } else {
-      //       Taro.createSelectorQuery()
-      //         .select('.nut-calendar-content')
-      //         .boundingClientRect((res) => {
-      //           viewHeight.value = res.height;
-      //         })
-      //         .exec();
-      //     }
-      //   }
-      //   const viewPosition = Math.round(currentScrollTop + viewHeight.value);
-      //   if (
-      //     viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight &&
-      //     currentScrollTop < state.monthsData[current].cssScrollHeight
-      //   ) {
-      //     current -= 1;
-      //   }
-      //   if (
-      //     current + 1 <= state.monthsNum &&
-      //     viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight
-      //   ) {
-      //     current += 1;
-      //   }
-      //   if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
-      //     current -= 1;
-      //   }
-      // }
-
       if (state.currentIndex !== current) {
         state.currentIndex = current;
         setDefaultRange(state.monthsNum, current);
@@ -781,7 +763,6 @@ export default create({
           }
           scale = Number((screenWidth / 750).toFixed(toFixed));
           scalePx.value = scale;
-          let transfromNum = Taro.pxTransform(64);
           initData();
         }
       });

src/packages/__VUE/calendaritem/type.ts

@@ -33,6 +33,11 @@ export interface CalendarState {
   monthsNum: number;
   defaultRange: number[];
 }
+export interface CalendarTaroState extends CalendarState {
+  compConthsDatas: MonthInfo[];
+  scrollTop: number;
+  containerHeight: string;
+}
 export interface Day {
   day: string | number;
   type: string;
@@ -62,3 +67,6 @@ export interface MonthInfo {
   cssHeight: number;
   cssScrollHeight: number;
 }
+export interface CalendarRef extends HTMLElement {
+  scrollToDate: (date: string) => void;
+}

src/packages/__VUE/range/demo.vue

@@ -85,7 +85,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { Toast } from '@/packages/nutui.vue';
+import Toast from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('range');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 

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

@@ -129,7 +129,7 @@ export default create({
 
   emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'],
 
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const buttonIndex = ref(0);
     let startValue: import('./type').SliderValue;
     let currentValue: import('./type').SliderValue;
@@ -141,7 +141,6 @@ export default create({
     const marksList = computed(() => {
       const { marks, max, min } = props;
       const marksKeys = Object.keys(marks);
-      const range = Number(max) - Number(min);
       const list = marksKeys
         .map(parseFloat)
         .sort((a, b) => a - b)
@@ -213,13 +212,13 @@ export default create({
         };
       }
     });
-    const markClassName = (mark: any) => {
+    const markClassName = (mark: number) => {
       const classPrefix = 'nut-range-mark';
       const { modelValue, max, min } = props;
-      let lowerBound: number = Number(min);
+      let lowerBound = Number(min);
       let upperBound: number | number[] = Number(max);
       if (props.range) {
-        const [left, right] = modelValue as any;
+        const [left, right] = modelValue as number[];
         lowerBound = left;
         upperBound = right;
       } else {
@@ -232,8 +231,8 @@ export default create({
       };
     };
     const marksStyle = (mark: number) => {
-      const { max, min, vertical } = props;
-      let style: any = {
+      const { min, vertical } = props;
+      let style: CSSProperties = {
         left: `${((mark - Number(min)) / scope.value) * 100}%`
       };
       if (vertical) {
@@ -245,15 +244,15 @@ export default create({
     };
     const tickStyle = (mark: number) => {
       const { modelValue, max, min } = props;
-      let lowerBound: number = Number(min);
-      let upperBound: number = Number(max);
+      let lowerBound = Number(min);
+      let upperBound = Number(max);
       if (props.range) {
-        const [left, right] = modelValue as any;
+        const [left, right] = modelValue as number[];
         lowerBound = left;
         upperBound = right;
       }
       let isActive = mark <= upperBound && mark >= lowerBound;
-      let style: any = {
+      let style: CSSProperties = {
         background: !isActive ? props.inactiveColor : props.activeColor
       };
 
@@ -291,17 +290,18 @@ export default create({
       }
     };
 
-    const onClick = async (event: MouseEvent) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onClick = async (event: any) => {
       if (props.disabled) {
         return;
       }
 
       const { min, modelValue } = props;
       const rect = await useTaroRect(root, Taro);
-      let delta = (event as any).touches[0].clientX - rect.left;
+      let delta = event.touches[0].clientX - rect.left;
       let total = rect.width;
       if (props.vertical) {
-        delta = (event as any).touches[0].clientY - rect.top;
+        delta = event.touches[0].clientY - rect.top;
         total = rect.height;
       }
       const value = Number(min) + (delta / total) * scope.value;

src/packages/__VUE/range/index.vue

@@ -127,7 +127,7 @@ export default create({
 
   emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'],
 
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const buttonIndex = ref(0);
     let startValue: import('./type').SliderValue;
     let currentValue: import('./type').SliderValue;
@@ -139,7 +139,6 @@ export default create({
     const marksList = computed(() => {
       const { marks, max, min } = props;
       const marksKeys = Object.keys(marks);
-      const range = Number(max) - Number(min);
       const list = marksKeys
         .map(parseFloat)
         .sort((a, b) => a - b)
@@ -214,7 +213,7 @@ export default create({
     const markClassName = (mark: number) => {
       const classPrefix = 'nut-range-mark';
       const { modelValue, max, min } = props;
-      let lowerBound: number = Number(min);
+      let lowerBound = Number(min);
       let upperBound: number | number[] = Number(max);
       if (props.range) {
         const [left, right] = modelValue as number[];
@@ -230,7 +229,7 @@ export default create({
       };
     };
     const marksStyle = (mark: number) => {
-      const { max, min, vertical } = props;
+      const { min, vertical } = props;
       let style: CSSProperties = {
         left: `${((mark - Number(min)) / scope.value) * 100}%`
       };
@@ -243,8 +242,8 @@ export default create({
     };
     const tickStyle = (mark: number) => {
       const { modelValue, max, min } = props;
-      let lowerBound: number = Number(min);
-      let upperBound: number = Number(max);
+      let lowerBound = Number(min);
+      let upperBound = Number(max);
       if (props.range) {
         const [left, right] = modelValue as number[];
         lowerBound = left;

src/packages/__VUE/trendarrow/demo.vue

@@ -55,7 +55,6 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('trendarrow');
-import { reactive, toRefs, getCurrentInstance, onMounted, ref } from 'vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({

src/shims-vue.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="vite/client" />
-
+interface FrameRequestCallback {
+  (time: number): void;
+}
+declare interface Window {
+  webkitCancelAnimationFrame(handle: number): void;
+  webkitRequestAnimationFrame(callback: FrameRequestCallback): number;
+}
 declare module '*.vue' {
   import type { DefineComponent } from 'vue';
   const component: DefineComponent<{}, {}, any>;

tsconfig.declaration.json

@@ -5,7 +5,7 @@
     "declarationDir": "./tsc/type",
     "emitDeclarationOnly": true
   },
-  "include": ["src/**/*.d.ts", "src/packages/__VUE/button/index.vue", "src/packages/__VUE/button/index.taro.vue", "src/packages/__VUE/button/*.ts"],
+  "include": ["src/**/*.d.ts","src/packages/__VUE/button/index.vue", "src/packages/__VUE/button/index.taro.vue", "src/packages/__VUE/button/*.ts"],
   "exclude": [
     "node_modules",
     "**/test/**/*",