refactor: replace typeof number with the built-in isNumber (#18706)

* refactor: replace typeof number with the built-in isNumber

* style: format

packages/components/slider/src/composables/use-lifecycle.ts

@@ -1,6 +1,6 @@
 import { nextTick, onMounted, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { isArray } from '@element-plus/utils'
+import { isArray, isNumber } from '@element-plus/utils'
 import type { SliderInitData, SliderProps } from '../slider'
 
 export const useLifecycle = (
@@ -21,10 +21,7 @@ export const useLifecycle = (
       }
       initData.oldValue = [initData.firstValue, initData.secondValue]
     } else {
-      if (
-        typeof props.modelValue !== 'number' ||
-        Number.isNaN(props.modelValue)
-      ) {
+      if (!isNumber(props.modelValue) || Number.isNaN(props.modelValue)) {
         initData.firstValue = props.min
       } else {
         initData.firstValue = Math.min(

packages/components/slider/src/composables/use-watch.ts

@@ -1,6 +1,6 @@
 import { watch } from 'vue'
 import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { debugWarn, isArray, throwError } from '@element-plus/utils'
+import { debugWarn, isArray, isNumber, throwError } from '@element-plus/utils'
 import type { ComputedRef, SetupContext } from 'vue'
 import type { Arrayable } from '@element-plus/utils'
 import type { FormItemContext } from '@element-plus/components/form'
@@ -53,7 +53,7 @@ export const useWatch = (
           initData.oldValue = val.slice()
         }
       }
-    } else if (!props.range && typeof val === 'number' && !Number.isNaN(val)) {
+    } else if (!props.range && isNumber(val) && !Number.isNaN(val)) {
       if (val < props.min) {
         _emit(props.min)
       } else if (val > props.max) {

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, isFunction } from '@element-plus/utils'
+import { getProp, isFunction, isNumber } from '@element-plus/utils'
 
 import type { VNode } from 'vue'
 import type { TableColumnCtx } from './table-column/defaults'
@@ -102,7 +102,7 @@ export const cellForced = {
       let i = $index + 1
       const index = column.index
 
-      if (typeof index === 'number') {
+      if (isNumber(index)) {
         i = $index + index
       } else if (isFunction(index)) {
         i = index($index)

packages/components/table/src/table-layout.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { isRef, nextTick, ref } from 'vue'
-import { hasOwn, isClient } from '@element-plus/utils'
+import { hasOwn, isClient, isNumber } from '@element-plus/utils'
 import { parseHeight } from './util'
 import type { Ref } from 'vue'
 
@@ -86,7 +86,7 @@ class TableLayout<T> {
     if (!el && (value || value === 0))
       return nextTick(() => this.setHeight(value, prop))
 
-    if (typeof value === 'number') {
+    if (isNumber(value)) {
       el.style[prop] = `${value}px`
       this.updateElsHeight()
     } else if (typeof value === 'string') {
@@ -139,12 +139,11 @@ class TableLayout<T> {
 
     const flattenColumns = this.getFlattenColumns()
     const flexColumns = flattenColumns.filter(
-      (column) => typeof column.width !== 'number'
+      (column) => !isNumber(column.width)
     )
     flattenColumns.forEach((column) => {
       // Clean those columns whose width changed from flex to unflex
-      if (typeof column.width === 'number' && column.realWidth)
-        column.realWidth = null
+      if (isNumber(column.width) && column.realWidth) column.realWidth = null
     })
     if (flexColumns.length > 0 && fit) {
       flattenColumns.forEach((column) => {

packages/components/table/src/util.ts

@@ -6,6 +6,7 @@ import {
   isArray,
   isBoolean,
   isFunction,
+  isNumber,
   isObject,
   throwError,
 } from '@element-plus/utils'
@@ -233,7 +234,7 @@ export function parseMinWidth(minWidth: number | string): number | string {
 }
 
 export function parseHeight(height: number | string) {
-  if (typeof height === 'number') {
+  if (isNumber(height)) {
     return height
   }
   if (typeof height === 'string') {

packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue

@@ -62,7 +62,7 @@
               ns.is('disabled', timeList[item][time!]),
             ]"
           >
-            <template v-if="typeof time === 'number'">
+            <template v-if="isNumber(time)">
               <template v-if="item === 'hours'">
                 {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)
                 }}{{ getAmPmFlag(time) }}
@@ -85,7 +85,7 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElIcon from '@element-plus/components/icon'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
-import { getStyle } from '@element-plus/utils'
+import { getStyle, isNumber } from '@element-plus/utils'
 import { timeUnits } from '../constants'
 import { buildTimeList } from '../utils'
 import { basicTimeSpinnerProps } from '../props/basic-time-spinner'