From 1e95706f8b72fd80f0690465cf847a91b4e49d4a Mon Sep 17 00:00:00 2001 From: invalid w Date: Sun, 8 Oct 2023 17:30:19 +0800 Subject: [PATCH] chore: Fix ts type error (#3100) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: fix onUploadProgress params type error * fix(BasicButton): extends type error * fix: useFormRules 类型问题 * fix: IFormConfig 类型问题 * chore: 设定CollapseItem list参数的类型 * chore: 修复sliderSpan类型错误 * chore: 改写成setup组件 * fix: static func type error * chore: 设定listener 函数 evt类型为Event * chore(props): 消除ts类型错误 * chore: 移除多余的类型转换 * Update domUtils.ts * chore: 消除iconPicker类型错误 * Update domUtils.ts * chore(clickOutside): 消除类型错误 * Update repeatClick.ts * Update index.ts * chore: 补全参数类型 * fix(Cropper): avatar uploadapi 类型问题 --- src/api/sys/upload.ts | 3 +- src/components/Button/src/BasicButton.vue | 4 +- src/components/CardList/src/CardList.vue | 8 +- src/components/Cropper/src/CropperAvatar.vue | 5 +- src/components/Icon/src/IconPicker.vue | 26 +++-- src/directives/clickOutside.ts | 6 +- src/directives/repeatClick.ts | 4 +- src/directives/ripple/index.ts | 4 +- src/locales/setupI18n.ts | 4 +- src/utils/domUtils.ts | 2 +- src/utils/propTypes.ts | 4 +- src/utils/props.ts | 7 +- .../VFormDesign/components/FormItemProps.vue | 94 ++++++------------- .../VFormDesign/components/FormProps.vue | 49 ++++------ .../VFormDesign/modules/CollapseItem.vue | 4 +- .../form-design/typings/v-form-component.ts | 35 ++++--- src/views/sys/login/useLogin.ts | 10 +- 17 files changed, 116 insertions(+), 153 deletions(-) diff --git a/src/api/sys/upload.ts b/src/api/sys/upload.ts index c47baf43..f4406680 100644 --- a/src/api/sys/upload.ts +++ b/src/api/sys/upload.ts @@ -2,6 +2,7 @@ import { UploadApiResult } from './model/uploadModel'; import { defHttp } from '/@/utils/http/axios'; import { UploadFileParams } from '/#/axios'; import { useGlobSetting } from '/@/hooks/setting'; +import { AxiosProgressEvent } from 'axios'; const { uploadUrl = '' } = useGlobSetting(); @@ -10,7 +11,7 @@ const { uploadUrl = '' } = useGlobSetting(); */ export function uploadApi( params: UploadFileParams, - onUploadProgress: (progressEvent: ProgressEvent) => void, + onUploadProgress: (progressEvent: AxiosProgressEvent) => void, ) { return defHttp.uploadFile( { diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue index 19e6dbba..cb88a81a 100644 --- a/src/components/Button/src/BasicButton.vue +++ b/src/components/Button/src/BasicButton.vue @@ -10,14 +10,14 @@ diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue index 5c35de74..ee157574 100644 --- a/src/components/Cropper/src/CropperAvatar.vue +++ b/src/components/Cropper/src/CropperAvatar.vue @@ -54,7 +54,10 @@ showBtn: { type: Boolean, default: true }, btnProps: { type: Object as PropType }, btnText: { type: String, default: '' }, - uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise> }, + uploadApi: { + type: Function as PropType<({ file, name }: { file: Blob; name: string }) => Promise>, + }, + size: { type: Number, default: 5 }, }; diff --git a/src/components/Icon/src/IconPicker.vue b/src/components/Icon/src/IconPicker.vue index 277141e8..d236b669 100644 --- a/src/components/Icon/src/IconPicker.vue +++ b/src/components/Icon/src/IconPicker.vue @@ -73,7 +73,6 @@ import SvgIcon from './SvgIcon.vue'; import iconsData from '../data/icons.data'; - import { propTypes } from '/@/utils/propTypes'; import { usePagination } from '/@/hooks/web/usePagination'; import { useDebounceFn } from '@vueuse/core'; import { useI18n } from '/@/hooks/web/useI18n'; @@ -98,15 +97,23 @@ } function getSvgIcons() { - return svgIcons.map((icon) => icon.replace('icon-', '')); + return svgIcons.map((icon: string) => icon.replace('icon-', '')); } - const props = defineProps({ - value: propTypes.string, - width: propTypes.string.def('100%'), - pageSize: propTypes.number.def(140), - copy: propTypes.bool.def(true), - mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'), + export interface Props { + value?: string; + width?: string; + pageSize?: number; + copy?: boolean; + mode?: 'svg' | 'iconify'; + } + + const props = withDefaults(defineProps(), { + value: '', + width: '100%', + pageSize: 140, + copy: false, + mode: 'iconify', }); const emit = defineEmits(['change', 'update:value']); @@ -152,7 +159,8 @@ } function handleSearchChange(e: Event) { - const value = e.target.value; + const value = (e.target as HTMLInputElement).value; + if (!value) { setCurrentPage(1); currentList.value = icons; diff --git a/src/directives/clickOutside.ts b/src/directives/clickOutside.ts index f6f3051a..9b7960fe 100644 --- a/src/directives/clickOutside.ts +++ b/src/directives/clickOutside.ts @@ -17,10 +17,10 @@ const nodeList: FlushList = new Map(); let startClick: MouseEvent; if (!isServer) { - on(document, 'mousedown', (e: MouseEvent) => (startClick = e)); - on(document, 'mouseup', (e: MouseEvent) => { + on(document, 'mousedown', (e: Event) => (startClick = e as MouseEvent)); + on(document, 'mouseup', (e: Event) => { for (const { documentHandler } of nodeList.values()) { - documentHandler(e, startClick); + documentHandler(e as MouseEvent, startClick); } }); } diff --git a/src/directives/repeatClick.ts b/src/directives/repeatClick.ts index d4ef150d..83c44270 100644 --- a/src/directives/repeatClick.ts +++ b/src/directives/repeatClick.ts @@ -18,8 +18,8 @@ const repeatDirective: Directive = { interval = null; }; - on(el, 'mousedown', (e: MouseEvent): void => { - if ((e as any).button !== 0) return; + on(el, 'mousedown', (e: Event): void => { + if ((e as MouseEvent).button !== 0) return; startTime = Date.now(); once(document as any, 'mouseup', clear); interval && clearInterval(interval); diff --git a/src/directives/ripple/index.ts b/src/directives/ripple/index.ts index 3da8014e..d256497f 100644 --- a/src/directives/ripple/index.ts +++ b/src/directives/ripple/index.ts @@ -28,9 +28,9 @@ const RippleDirective: Directive & RippleProto = { const background = bg || RippleDirective.background; const zIndex = RippleDirective.zIndex; - el.addEventListener(options.event, (event: EventType) => { + el.addEventListener(options.event, (event: Event) => { rippler({ - event, + event: event as EventType, el, background, zIndex, diff --git a/src/locales/setupI18n.ts b/src/locales/setupI18n.ts index 405fb0c2..c98ef920 100644 --- a/src/locales/setupI18n.ts +++ b/src/locales/setupI18n.ts @@ -1,5 +1,5 @@ import type { App } from 'vue'; -import type { I18n, I18nOptions } from 'vue-i18n'; +import type { I18nOptions } from 'vue-i18n'; import { createI18n } from 'vue-i18n'; import { setHtmlPageLang, setLoadLocalePool } from './helper'; @@ -39,6 +39,6 @@ async function createI18nOptions(): Promise { // setup i18n instance with glob export async function setupI18n(app: App) { const options = await createI18nOptions(); - i18n = createI18n(options) as I18n; + i18n = createI18n(options); app.use(i18n); } diff --git a/src/utils/domUtils.ts b/src/utils/domUtils.ts index 7efe9cb8..bc80613b 100644 --- a/src/utils/domUtils.ts +++ b/src/utils/domUtils.ts @@ -158,7 +158,7 @@ export function off( export function once(el: HTMLElement, event: string, fn: EventListener): void { const listener = function (this: any, ...args: unknown[]) { if (fn) { - fn.apply(this, args); + fn.apply(this, args as [evt: Event]); } off(el, event, listener); }; diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts index 16cf9cd4..b4f0623e 100644 --- a/src/utils/propTypes.ts +++ b/src/utils/propTypes.ts @@ -20,13 +20,13 @@ const newPropTypes = createTypes({ // 从 vue-types v5.0 开始，extend()方法已经废弃，当前已改为官方推荐的ES6+方法 https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method class propTypes extends newPropTypes { // a native-like validator that supports the `.validable` method - static get style() { + static override get style() { return toValidableType('style', { type: [String, Object], }); } - static get VNodeChild() { + static override get VNodeChild() { return toValidableType('VNodeChild', { type: undefined, }); diff --git a/src/utils/props.ts b/src/utils/props.ts index 00b364d0..8984cfa2 100644 --- a/src/utils/props.ts +++ b/src/utils/props.ts @@ -129,7 +129,7 @@ export function buildProp< return { type: - typeof type === 'object' && Object.getOwnPropertySymbols(type).includes(wrapperKey) + typeof type === 'object' && Object.getOwnPropertySymbols(type).includes(wrapperKey) && type ? type[wrapperKey] : type, required: !!required, @@ -175,9 +175,10 @@ export const buildProps = < : never; }; -export const definePropType = (val: any) => ({ [wrapperKey]: val } as PropWrapper); +export const definePropType = (val: any) => ({ [wrapperKey]: val }) as PropWrapper; + +export const keyOf = (arr: T) => Object.keys(arr) as Array; -export const keyOf = (arr: T) => Object.keys(arr) as Array; export const mutable = >(val: T) => val as Mutable; diff --git a/src/views/form-design/components/VFormDesign/components/FormItemProps.vue b/src/views/form-design/components/VFormDesign/components/FormItemProps.vue index 22246257..846c6b0c 100644 --- a/src/views/form-design/components/VFormDesign/components/FormItemProps.vue +++ b/src/views/form-design/components/VFormDesign/components/FormItemProps.vue @@ -61,8 +61,8 @@ - diff --git a/src/views/form-design/components/VFormDesign/components/FormProps.vue b/src/views/form-design/components/VFormDesign/components/FormProps.vue index 9dd7fa4d..b704f4d0 100644 --- a/src/views/form-design/components/VFormDesign/components/FormProps.vue +++ b/src/views/form-design/components/VFormDesign/components/FormProps.vue @@ -42,10 +42,10 @@
- + - + @@ -75,8 +75,8 @@
- diff --git a/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue b/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue index 402a1dbf..8ca8b5a9 100644 --- a/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue +++ b/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue @@ -31,7 +31,7 @@