refactor: replace typeof fn with the built-in isFunction (#18705)

packages/components/message-box/src/index.vue

@@ -175,6 +175,7 @@ import { ElOverlay } from '@element-plus/components/overlay'
 import {
   TypeComponents,
   TypeComponentsMap,
+  isFunction,
   isValidComponentSize,
 } from '@element-plus/utils'
 import { ElIcon } from '@element-plus/components/icon'
@@ -435,7 +436,7 @@ export default defineComponent({
           return false
         }
         const inputValidator = state.inputValidator
-        if (typeof inputValidator === 'function') {
+        if (isFunction(inputValidator)) {
           const validateResult = inputValidator(state.inputValue)
           if (validateResult === false) {
             state.editorErrorMessage =

packages/components/table/src/config.ts

@@ -3,7 +3,7 @@ import { h } from 'vue'
 import ElCheckbox from '@element-plus/components/checkbox'
 import { ElIcon } from '@element-plus/components/icon'
 import { ArrowRight, Loading } from '@element-plus/icons-vue'
-import { getProp } from '@element-plus/utils'
+import { getProp, isFunction } from '@element-plus/utils'
 
 import type { VNode } from 'vue'
 import type { TableColumnCtx } from './table-column/defaults'
@@ -104,7 +104,7 @@ export const cellForced = {
 
       if (typeof index === 'number') {
         i = $index + index
-      } else if (typeof index === 'function') {
+      } else if (isFunction(index)) {
         i = index($index)
       }
       return h('div', {}, [i])

packages/components/table/src/table-body/styles-helper.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { isArray } from '@element-plus/utils'
+import { isArray, isFunction } from '@element-plus/utils'
 import {
   ensurePosition,
   getFixedColumnOffset,
@@ -17,7 +17,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
 
   const getRowStyle = (row: T, rowIndex: number) => {
     const rowStyle = parent?.props.rowStyle
-    if (typeof rowStyle === 'function') {
+    if (isFunction(rowStyle)) {
       return rowStyle.call(null, {
         row,
         rowIndex,
@@ -41,7 +41,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
     const rowClassName = parent?.props.rowClassName
     if (typeof rowClassName === 'string') {
       classes.push(rowClassName)
-    } else if (typeof rowClassName === 'function') {
+    } else if (isFunction(rowClassName)) {
       classes.push(
         rowClassName.call(null, {
           row,
@@ -60,7 +60,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
   ) => {
     const cellStyle = parent?.props.cellStyle
     let cellStyles = cellStyle ?? {}
-    if (typeof cellStyle === 'function') {
+    if (isFunction(cellStyle)) {
       cellStyles = cellStyle.call(null, {
         rowIndex,
         columnIndex,
@@ -97,7 +97,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
     const cellClassName = parent?.props.cellClassName
     if (typeof cellClassName === 'string') {
       classes.push(cellClassName)
-    } else if (typeof cellClassName === 'function') {
+    } else if (isFunction(cellClassName)) {
       classes.push(
         cellClassName.call(null, {
           rowIndex,
@@ -119,7 +119,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
     let rowspan = 1
     let colspan = 1
     const fn = parent?.props.spanMethod
-    if (typeof fn === 'function') {
+    if (isFunction(fn)) {
       const result = fn({
         row,
         column,

packages/components/table/src/table-header/style.helper.ts

@@ -1,5 +1,7 @@
 import { inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
+import { isFunction } from '@element-plus/utils'
+
 import {
   ensurePosition,
   getFixedColumnOffset,
@@ -15,7 +17,7 @@ function useStyle<T>(props: TableHeaderProps<T>) {
 
   const getHeaderRowStyle = (rowIndex: number) => {
     const headerRowStyle = parent?.props.headerRowStyle
-    if (typeof headerRowStyle === 'function') {
+    if (isFunction(headerRowStyle)) {
       return headerRowStyle.call(null, { rowIndex })
     }
     return headerRowStyle
@@ -26,7 +28,7 @@ function useStyle<T>(props: TableHeaderProps<T>) {
     const headerRowClassName = parent?.props.headerRowClassName
     if (typeof headerRowClassName === 'string') {
       classes.push(headerRowClassName)
-    } else if (typeof headerRowClassName === 'function') {
+    } else if (isFunction(headerRowClassName)) {
       classes.push(headerRowClassName.call(null, { rowIndex }))
     }
 
@@ -40,7 +42,7 @@ function useStyle<T>(props: TableHeaderProps<T>) {
     column: TableColumnCtx<T>
   ) => {
     let headerCellStyles = parent?.props.headerCellStyle ?? {}
-    if (typeof headerCellStyles === 'function') {
+    if (isFunction(headerCellStyles)) {
       headerCellStyles = headerCellStyles.call(null, {
         rowIndex,
         columnIndex,
@@ -92,7 +94,7 @@ function useStyle<T>(props: TableHeaderProps<T>) {
     const headerCellClassName = parent?.props.headerCellClassName
     if (typeof headerCellClassName === 'string') {
       classes.push(headerCellClassName)
-    } else if (typeof headerCellClassName === 'function') {
+    } else if (isFunction(headerCellClassName)) {
       classes.push(
         headerCellClassName.call(null, {
           rowIndex,

packages/components/table/src/util.ts

@@ -5,6 +5,7 @@ import {
   hasOwn,
   isArray,
   isBoolean,
+  isFunction,
   isObject,
   throwError,
 } from '@element-plus/utils'
@@ -176,7 +177,7 @@ export const getRowIdentity = <T>(
       current = current[element]
     }
     return `${current}`
-  } else if (typeof rowKey === 'function') {
+  } else if (isFunction(rowKey)) {
     return rowKey.call(null, row)
   }
 }

packages/components/tree/src/model/node.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { reactive } from 'vue'
-import { hasOwn, isArray } from '@element-plus/utils'
+import { hasOwn, isArray, isFunction } from '@element-plus/utils'
 import { NODE_KEY, markNodeData } from './util'
 import type TreeStore from './tree-store'
 
@@ -62,7 +62,7 @@ const getPropertyFromData = function (node: Node, prop: string): any {
   const data = node.data || {}
   const config = props[prop]
 
-  if (typeof config === 'function') {
+  if (isFunction(config)) {
     return config(data, node)
   } else if (typeof config === 'string') {
     return data[config]

packages/components/tree/src/model/useDragNode.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { provide, ref } from 'vue'
-import { addClass, removeClass } from '@element-plus/utils'
+import { addClass, isFunction, removeClass } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import type { InjectionKey } from 'vue'
 import type Node from './node'
@@ -35,10 +35,7 @@ export function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) {
   })
 
   const treeNodeDragStart = ({ event, treeNode }: DragOptions) => {
-    if (
-      typeof props.allowDrag === 'function' &&
-      !props.allowDrag(treeNode.node)
-    ) {
+    if (isFunction(props.allowDrag) && !props.allowDrag(treeNode.node)) {
       event.preventDefault()
       return false
     }
@@ -67,7 +64,7 @@ export function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) {
     let dropInner = true
     let dropNext = true
     let userAllowDropInner = true
-    if (typeof props.allowDrop === 'function') {
+    if (isFunction(props.allowDrop)) {
       dropPrev = props.allowDrop(draggingNode.node, dropNode.node, 'prev')
       userAllowDropInner = dropInner = props.allowDrop(
         draggingNode.node,

packages/utils/dom/scroll.ts

@@ -1,6 +1,6 @@
 import { isClient } from '../browser'
 import { easeInOutCubic } from '../easings'
-import { isWindow } from '../types'
+import { isFunction, isWindow } from '../types'
 import { cAF, rAF } from '../raf'
 import { getStyle } from './style'
 
@@ -130,7 +130,7 @@ export function animateScrollTo(
     }
     if (time < duration) {
       handle = rAF(scroll)
-    } else if (typeof callback === 'function') {
+    } else if (isFunction(callback)) {
       callback()
     }
   }