fix(types): fix some type errors

vben
1 parent bb89c505
Showing 10 changed files with 24 additions and 25 deletions
src/components/FlowChart/src/FlowChart.vue
src/components/Loading/src/useLoading.ts
src/components/Preview/src/Functional.vue
src/components/Table/src/BasicTable.vue
src/components/Table/src/components/settings/ColumnSetting.vue
src/components/Table/src/hooks/useTableScroll.ts
src/hooks/core/useRefs.ts
src/hooks/event/useEventListener.ts
src/hooks/web/useECharts.ts
src/utils/is.ts
@@ -8,6 +8,7 @@
   </div>
 </template>
 <script lang="ts">
+  import type { Ref } from 'vue';
   import type { Definition } from '@logicflow/core';
   import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue';
   import FlowChartToolbar from './FlowChartToolbar.vue';
@@ -46,10 +47,10 @@
       },
     },
     setup(props) {
-      const lfElRef = ref<ElRef>(null);
-      const graphData = ref<Recordable>({});
+      const lfElRef = ref(null);
+      const graphData = ref({});
  
-      const lfInstance = ref<Nullable<LogicFlow>>(null);
+      const lfInstance = ref(null) as Ref<LogicFlow | null>;
  
       const { prefixCls } = useDesign('flow-chart');
       const appStore = useAppStore();
@@ -32,7 +32,7 @@ export function useLoading(
   const instance = createLoading(props, undefined, true);
  
   const open = (): void => {
-    const t = unref(target);
+    const t = unref(target as Ref<ElRef>);
     if (!t) return;
     instance.open(t);
   };
 <script lang="tsx">
   import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
-  import { Props } from './typing';
   import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
   import resumeSvg from '/@/assets/svg/preview/resume.svg';
   import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
@@ -57,7 +56,7 @@
     name: 'ImagePreview',
     props,
     emits: ['img-load', 'img-error'],
-    setup(props: Props, { expose, emit }) {
+    setup(props, { expose, emit }) {
       interface stateInfo {
         scale: number;
         rotate: number;
@@ -117,8 +116,9 @@
       }
  
       const getScaleStep = computed(() => {
-        if (props.scaleStep > 0 && props.scaleStep < 100) {
-          return props.scaleStep / 100;
+        const scaleStep = props?.scaleStep ?? 0;
+        if (scaleStep ?? (0 > 0 && scaleStep < 100)) {
+          return scaleStep / 100;
         } else {
           return imgState.imgScale / 10;
         }
@@ -164,7 +164,7 @@
         img.src = url;
         img.onload = (e: Event) => {
           if (imgState.currentUrl !== url) {
-            const ele: HTMLElement[] = e.composedPath();
+            const ele: any[] = e.composedPath();
             if (props.rememberState) {
               // 保存当前图片的缩放信息
               stateMap.set(imgState.currentUrl, {
@@ -244,7 +244,7 @@
         setRotate: (rotate: number) => {
           imgState.imgRotate = rotate;
         },
-      } as PreviewActions);
+      });
  
       // 上一页下一页
       function handleChange(direction: 'left' | 'right') {
@@ -91,10 +91,10 @@
       'columns-change',
     ],
     setup(props, { attrs, emit, slots, expose }) {
-      const tableElRef = ref<ComponentRef>(null);
+      const tableElRef = ref(null);
       const tableData = ref<Recordable[]>([]);
  
-      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      const wrapRef = ref(null);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
  
       const { prefixCls } = useDesign('basic-table');
@@ -282,7 +282,7 @@
         nextTick(() => {
           const columnListEl = unref(columnListRef);
           if (!columnListEl) return;
-          const el = columnListEl.$el;
+          const el = columnListEl.$el as any;
           if (!el) return;
           // Drag and drop sort
           const { initSortable } = useSortable(el, {
@@ -66,6 +66,7 @@ export function useTableScroll(
  
     if (!bodyEl) {
       bodyEl = tableEl.querySelector('.ant-table-body');
+      if (!bodyEl) return;
     }
  
     const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
-import { ref, onBeforeUpdate, Ref } from 'vue';
+import type { Ref } from 'vue';
+import { ref, onBeforeUpdate } from 'vue';
  
 export function useRefs(): [Ref<HTMLElement[]>, (index: number) => (el: HTMLElement) => void] {
-  const refs = ref<HTMLElement[]>([]);
+  const refs = ref([]) as Ref<HTMLElement[]>;
  
   onBeforeUpdate(() => {
     refs.value = [];
 import type { Ref } from 'vue';
-
 import { ref, watch, unref } from 'vue';
 import { useThrottleFn, useDebounceFn } from '@vueuse/core';
  
 export type RemoveEventFn = () => void;
-
 export interface UseEventParams {
   el?: Element | Ref<Element | undefined> | Window | any;
   name: string;
@@ -28,7 +26,7 @@ export function useEventListener({
   const isAddRef = ref(false);
  
   if (el) {
-    const element: Ref<Element> = ref(el as Element);
+    const element = ref(el as Element) as Ref<Element>;
  
     const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
     const realHandler = wait ? handler : listener;
 import type { EChartsOption } from 'echarts';
 import type { Ref } from 'vue';
-
 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '@vueuse/core';
 import { unref, nextTick, watch, computed, ref } from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import { useEventListener } from '/@/hooks/event/useEventListener';
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
-
 import echarts from '/@/utils/lib/echarts';
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  
@@ -18,19 +16,19 @@ export function useECharts(
   const { getDarkMode } = useRootSetting();
   let chartInstance: echarts.ECharts | null = null;
   let resizeFn: Fn = resize;
-  const cacheOptions = ref<EChartsOption>({});
+  const cacheOptions = ref({}) as Ref<EChartsOption>;
   let removeResizeFn: Fn = () => {};
  
   resizeFn = useDebounceFn(resize, 200);
  
-  const getOptions = computed((): EChartsOption => {
+  const getOptions = computed(() => {
     if (getDarkMode.value !== 'dark') {
-      return cacheOptions.value;
+      return cacheOptions.value as EChartsOption;
     }
     return {
       backgroundColor: 'transparent',
       ...cacheOptions.value,
-    };
+    } as EChartsOption;
   });
  
   function initCharts(t = theme) {
@@ -84,7 +84,7 @@ export function isElement(val: unknown): val is Element {
   return isObject(val) && !!val.tagName;
 }
  
-export function isMap(val: unknown): val is Map {
+export function isMap(val: unknown): val is Map<any, any> {
   return is(val, 'Map');
 }