refactor: tidy up typeof & format code

docs/docs/.vitepress/utils/sidebar.ts

@@ -114,7 +114,10 @@ export const sidebar = {
         { text: 'Watermark 水印', link: '/components/watermark' },
         { text: 'Ripple 涟漪', link: '/components/ripple' },
         { text: 'Calendar 日历', link: '/components/calendar' },
-        { text: 'CollapseAnimation 折叠动画', link: '/components/collapse-animation' }
+        {
+          text: 'CollapseAnimation 折叠动画',
+          link: '/components/collapse-animation'
+        }
       ]
     }
   ]

packages/fighting-design/_hooks/use-avatar/index.ts

@@ -7,7 +7,7 @@ import type { UseAvatarReturnInterface } from './interface'
 
 /**
  * useAvatar 内部样式
- * 
+ *
  * @param prop props 列表
  * @returns { UseAvatarReturnInterface }
  */
@@ -46,24 +46,22 @@ export const useAvatar = (prop: AvatarPropsType): UseAvatarReturnInterface => {
   /**
    * 样式列表
    */
-  const styleList: ComputedRef<CSSProperties> = styles(
-    [
-      'background',
-      'fontColor',
-      'fontSize',
-      /**
-       * size 配置项需要进行检查是否需要过滤
-       *
-       * 只有是数字的时候才需要过滤，是数字代表是自定义的尺寸
-       *
-       * 字符串代表内部尺寸，用于类名拼接
-       */
-      {
-        key: 'size',
-        callback: (): boolean => isNumber(prop.size)
-      }
-    ]
-  )
+  const styleList: ComputedRef<CSSProperties> = styles([
+    'background',
+    'fontColor',
+    'fontSize',
+    /**
+     * size 配置项需要进行检查是否需要过滤
+     *
+     * 只有是数字的时候才需要过滤，是数字代表是自定义的尺寸
+     *
+     * 字符串代表内部尺寸，用于类名拼接
+     */
+    {
+      key: 'size',
+      callback: (): boolean => isNumber(prop.size)
+    }
+  ])
 
   return {
     nodeClassList,

packages/fighting-design/_hooks/use-avatar/interface.d.ts

@@ -3,7 +3,7 @@ import type { ClassListInterface } from '../../_interface'
 
 /**
  * useAvatar 内部样式 hook 方法返回值类型接口
- * 
+ *
  * @param nodeClassList img 元素的类名列表
  * @param classList 类名列表
  * @param styleList 样式列表

packages/fighting-design/_hooks/use-list/index.ts

@@ -13,9 +13,9 @@ import type { FilterParamsInterface } from '../use-props/interface'
 
 /**
  * 自动计算组件所需要的类名列表和样式列表
- * 
+ *
  * 类名和样式首先通过传入属性列表数组，使用过滤 hook 进行过滤
- * 
+ *
  * 过滤后的 prop 对象再进行样式或者类名处理
  *
  * @param prop prop 列表
@@ -26,12 +26,11 @@ export const useList: UseListInterface = <T>(
   prop: T,
   name: string
 ): UseListReturnInterface => {
-
   /**
    * 过滤 props
-   * 
+   *
    * 虽然说 classes 和 styles 都接受一个数组参数可以直接遍历
-   * 
+   *
    * 但是有些参数需要传入特殊的回调进行判断，只能是先过滤后再遍历
    */
   const { filter } = useProps(prop)
@@ -69,7 +68,9 @@ export const useList: UseListInterface = <T>(
            * 否则使用值拼接
            */
           classList.value.push(
-            `f-${name}__${isBoolean(propList[key]) ? convertFormat(key) : propList[key]}`
+            `f-${name}__${
+              isBoolean(propList[key]) ? convertFormat(key) : propList[key]
+            }`
           )
         }
       }
@@ -99,16 +100,18 @@ export const useList: UseListInterface = <T>(
         if (propList[key]) {
           /**
            * @description 为什么要进行 isNumber 判断？
-           * 
+           *
            * 因为很多属性是同时支持 number 和 staring 类型的参数
-           * 
+           *
            * 所以这里要进行判断，如果是数字类型，则需要使用 sizeChange 方法进行转换标注单位
-           * 
+           *
            * @description convertFormat 方法描述
-           * 
+           *
            * 因为 prop 参数的键都是驼峰命名法，所以这里要转换为短横线连接命名
            */
-          styleList[`--f-${name}-${convertFormat(key)}`] = isNumber(propList[key])
+          styleList[`--f-${name}-${convertFormat(key)}`] = isNumber(
+            propList[key]
+          )
             ? sizeChange(propList[key] as number)
             : propList[key]
         }

packages/fighting-design/_hooks/use-list/interface.d.ts

@@ -27,12 +27,15 @@ export interface UseListInterface {
 
 /**
  * 类名列表方法类型接口
- * 
- * @param list 类名所需要的 prop 参数 
+ *
+ * @param list 类名所需要的 prop 参数
  * @param className 其它所需要的类名
  */
 export interface ClassesInterface {
-  (list: FilterParamsInterface, className?: string): ComputedRef<ClassListInterface>
+  (
+    list: FilterParamsInterface,
+    className?: string
+  ): ComputedRef<ClassListInterface>
 }
 
 /**

packages/fighting-design/_hooks/use-message/index.ts

@@ -2,7 +2,7 @@ import messageVue from '../../message/src/message.vue'
 import notificationVue from '../../notification/src/notification.vue'
 import { render, createVNode } from 'vue'
 import { useMassageManage } from '../../_hooks'
-import { runCallback } from '../../_utils'
+import { runCallback, isString } from '../../_utils'
 import type { ComponentInternalInstance, VNode } from 'vue'
 import type {
   DefaultOptionsInterface,
@@ -41,7 +41,7 @@ export const useMessage: UseMessageInterface = (
     const container: HTMLDivElement = document.createElement('div')
     const id = `message-${seed}`
 
-    if (typeof options === 'string') {
+    if (isString(options)) {
       options = {
         message: options
       } as MessageOptions

packages/fighting-design/_hooks/use-update-input/index.ts

@@ -1,4 +1,4 @@
-import { runCallback } from '../../_utils'
+import { runCallback, isNumber } from '../../_utils'
 import type {
   UseUpdateInputInterface,
   UseUpdateInputEmitInterface,
@@ -29,7 +29,7 @@ export const useUpdateInput: UseUpdateInputInterface = (
   const onInput: HandleEventInterface = (evt: Event): void => {
     emit(
       'update:modelValue',
-      prop.type === 'number'
+      isNumber(prop.type)
         ? Number((evt.target as HTMLInputElement).value)
         : (evt.target as HTMLInputElement).value
     )
@@ -51,7 +51,7 @@ export const useUpdateInput: UseUpdateInputInterface = (
    */
   const onClear: OrdinaryFunctionInterface = (): void => {
     if (prop.disabled) return
-    emit('update:modelValue', prop.type === 'number' ? 0 : '')
+    emit('update:modelValue', isNumber(prop.type) ? 0 : '')
   }
 
   return {

packages/fighting-design/_utils/utils/index.ts

@@ -8,9 +8,11 @@ import type {
   UtilsIsStringInterface,
   UtilsSizeToNumInterface,
   UtilsIsObjectInterface,
-  UtilsIsArrayInterface
+  UtilsIsFunctionInterface
 } from './interface'
 
+const _toString = Object.prototype.toString
+
 /**
  * 保留小数点后 no 位
  *
@@ -59,10 +61,7 @@ export const debounce: UtilsDebounceInterface = (
 export const isNumber: UtilsIsNumberInterface = (
   target: unknown
 ): target is number => {
-  return (
-    typeof target === 'number' &&
-    Object.prototype.toString.call(target) === '[object Number]'
-  )
+  return typeof target === 'number'
 }
 
 /**
@@ -74,10 +73,7 @@ export const isNumber: UtilsIsNumberInterface = (
 export const isBoolean: UtilsIsBooleanInterface = (
   target: unknown
 ): target is boolean => {
-  return (
-    typeof target === 'boolean' &&
-    Object.prototype.toString.call(target) === '[object Boolean]'
-  )
+  return typeof target === 'boolean'
 }
 
 /**
@@ -89,10 +85,7 @@ export const isBoolean: UtilsIsBooleanInterface = (
 export const isString: UtilsIsStringInterface = (
   target: unknown
 ): target is string => {
-  return (
-    typeof target === 'string' &&
-    Object.prototype.toString.call(target) === '[object String]'
-  )
+  return typeof target === 'string'
 }
 
 /**
@@ -104,27 +97,29 @@ export const isString: UtilsIsStringInterface = (
 export const isObject: UtilsIsObjectInterface = (
   target: unknown
 ): target is Object => {
-  return (
-    typeof target === 'object' &&
-    Object.prototype.toString.call(target) === '[object Object]'
-  )
+  return _toString.call(target) === '[object Object]'
 }
 
 /**
- * 判断一个值是否为 array 类型
+ * 判断一个值是否为 function 类型
  *
  * @param target 要检测的值
  * @returns { boolean }
  */
-export const isArray: UtilsIsArrayInterface = (
+export const isFunction: UtilsIsFunctionInterface = (
   target: unknown
-): target is [] => {
-  return (
-    typeof target === 'object' &&
-    Object.prototype.toString.call(target) === '[object Array]'
-  )
+): target is Function => {
+  return typeof target === 'function'
 }
 
+/**
+ * 判断一个值是否为 array 类型
+ *
+ * @param target 要检测的值
+ * @returns { boolean }
+ */
+export const isArray = Array.isArray
+
 /**
  * 给数字小于 10 的数字前面加 0
  *
@@ -153,7 +148,7 @@ export const sizeChange: UtilsSizeChangeInterface = (
   target = 'px'
 ): string => {
   if (!size) return ''
-  return typeof size === 'string' ? size : size + target
+  return isString(size) ? size : size + target
 }
 
 /**
@@ -169,7 +164,7 @@ export const sizeToNum: UtilsSizeToNumInterface = (
   size: string | number
 ): number => {
   if (!size) return 0
-  if (typeof size === 'number') return size
+  if (isNumber(size)) return size
   return Number.parseFloat(size) || 0
 }
 

packages/fighting-design/_utils/utils/interface.d.ts

@@ -64,6 +64,17 @@ export interface UtilsIsObjectInterface {
   (target: unknown): target is Object
 }
 
+/**
+ * 检测一个数据是否为 function 类型方法类型接口
+ *
+ * 传入一个未知的类型，返回布尔值
+ *
+ * @param target 未知参数
+ */
+export interface UtilsIsFunctionInterface {
+  (target: unknown): target is Function
+}
+
 /**
  * 检测一个数据是否为 Array 类型方法类型接口
  *

packages/fighting-design/avatar/src/props.ts

@@ -1,6 +1,7 @@
 import type { PropType, ExtractPropTypes, VNode, Component } from 'vue'
 import type { AvatarFitType, AvatarSizeType } from './interface'
 import type { HandleEventInterface } from '../../_interface'
+import { isString, isNumber } from '../../_utils'
 
 export const Props = {
   /**
@@ -78,9 +79,9 @@ export const Props = {
     type: [String, Number] as PropType<AvatarSizeType | number>,
     default: (): AvatarSizeType => 'middle',
     validator: (val: AvatarSizeType | number): boolean => {
-      if (typeof val === 'string') {
+      if (isString(val)) {
         return (['large', 'middle', 'small', 'mini'] as const).includes(val)
-      } else if (typeof val === 'number') {
+      } else if (isNumber(val)) {
         return val >= 1
       }
       return false

packages/fighting-design/button-group/src/interface.d.ts

@@ -3,4 +3,4 @@ export type { ButtonGroupPropsType } from './props'
 /**
  * 排列方式
  */
-export type ButtonGroupDirectionType = 'horizontal' | 'vertical' 
+export type ButtonGroupDirectionType = 'horizontal' | 'vertical'

packages/fighting-design/button-group/src/props.ts

@@ -18,7 +18,7 @@ export const Props = {
   },
   /**
    * 排列方向
-   * 
+   *
    * @values horizontal vertical
    * @defaultValue horizontal
    */

packages/fighting-design/checkbox/src/checkbox.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup name="FCheckbox">
   import { Props } from './props'
   import { computed, inject } from 'vue'
-  import { isArray, runCallback } from '../../_utils'
+  import { isArray, isBoolean, runCallback } from '../../_utils'
   import { CHECKBOX_GROUP_PROPS_KEY } from '../../checkbox-group/src/props'
   import type { ClassListInterface } from '../../_interface'
   import type {
@@ -56,7 +56,7 @@
 
     if (isArray(val)) {
       return val.includes(prop.label as never)
-    } else if (typeof val === 'boolean') {
+    } else if (isBoolean(val)) {
       return val
     }
     return (val === prop.label) as boolean

packages/fighting-design/global.d.ts

@@ -84,4 +84,4 @@ declare module '@vue/runtime-core' {
   }
 }
 
-export { }
+export {}

packages/fighting-design/menu-item/src/menu-item.vue

@@ -62,7 +62,7 @@
    * 当前是否呗选中
    */
   const isActive: ComputedRef<boolean> = computed((): boolean => {
-    return prop.name === INJECT_DEPEND.defaultActive
+    return prop.name === INJECT_DEPEND?.defaultActive
   })
 </script>