refactor: explicit number casting

KaelWD · KaelWD · commit 4f6e77fac258 · 2025-03-07T18:08:42.000+11:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -85,6 +85,7 @@ module.exports = {
       ignoreCase: true,
     }],
     'multiline-ternary': 'off',
+    'no-implicit-coercion': ['error', { boolean: false }],
 
     'sonarjs/cognitive-complexity': 'off',
     'sonarjs/no-duplicate-string': 'off',
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
@@ -125,8 +125,8 @@
       document.body.append(copy)
 
       ;(copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach(el => {
-        el.scrollLeft = +el.dataset.scrollX!
-        el.scrollTop = +el.dataset.scrollY!
+        el.scrollLeft = Number(el.dataset.scrollX)
+        el.scrollTop = Number(el.dataset.scrollY)
       })
 
       function onTransitionend (e: TransitionEvent) {
diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -73,16 +73,16 @@ export const VBadge = genericComponent<VBadgeSlots>()({
         : (props.dot ? 8 : 12)
 
       return base + (
-        ['top', 'bottom'].includes(side) ? +(props.offsetY ?? 0)
-        : ['left', 'right'].includes(side) ? +(props.offsetX ?? 0)
+        ['top', 'bottom'].includes(side) ? Number(props.offsetY ?? 0)
+        : ['left', 'right'].includes(side) ? Number(props.offsetX ?? 0)
         : 0
       )
     })
 
     useRender(() => {
       const value = Number(props.content)
       const content = (!props.max || isNaN(value)) ? props.content
-        : value <= +props.max ? value
+        : value <= Number(props.max) ? value
         : `${props.max}+`
 
       const [badgeAttrs, attrs] = pickWithRest(ctx.attrs as Record<string, any>, [
diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.tsx b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
@@ -94,7 +94,10 @@ export const VCarousel = genericComponent<new <T>(
     function startTimeout () {
       if (!props.cycle || !windowRef.value) return
 
-      slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000)
+      slideTimeout = window.setTimeout(
+        windowRef.value.group.next,
+        Number(props.interval) > 0 ? Number(props.interval) : 6000
+      )
     }
 
     function restartTimeout () {
diff --git a/packages/vuetify/src/components/VDataTable/composables/headers.ts b/packages/vuetify/src/components/VDataTable/composables/headers.ts
@@ -115,10 +115,10 @@ function parseFixedColumns (items: InternalDataTableHeader[]) {
       } else {
         if (!seenFixed) {
           item.lastFixed = true
-        } else if (isNaN(+item.width!)) {
+        } else if (isNaN(Number(item.width))) {
           consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`)
         } else {
-          item.minWidth = Math.max(+item.width! || 0, +item.minWidth! || 0)
+          item.minWidth = Math.max(Number(item.width) || 0, Number(item.minWidth) || 0)
         }
         seenFixed = true
       }
diff --git a/packages/vuetify/src/components/VDataTable/composables/paginate.ts b/packages/vuetify/src/components/VDataTable/composables/paginate.ts
@@ -43,8 +43,8 @@ type PaginationProps = {
 }
 
 export function createPagination (props: PaginationProps) {
-  const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1))
-  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10))
+  const page = useProxiedModel(props, 'page', undefined, value => Number(value ?? 1))
+  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => Number(value ?? 10))
 
   return { page, itemsPerPage }
 }
diff --git a/packages/vuetify/src/components/VPagination/VPagination.tsx b/packages/vuetify/src/components/VPagination/VPagination.tsx
@@ -183,7 +183,7 @@ export const VPagination = genericComponent<VPaginationSlots>()({
       const minButtons = props.showFirstLastPage ? 5 : 3
       return Math.max(0, Math.floor(
         // Round to two decimal places to avoid floating point errors
-        +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)
+        Number(((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2))
       ))
     }
 
@@ -262,7 +262,7 @@ export const VPagination = genericComponent<VPaginationSlots>()({
               ref,
               ellipsis: false,
               icon: true,
-              disabled: !!props.disabled || +props.length < 2,
+              disabled: !!props.disabled || Number(props.length) < 2,
               color: isActive ? props.activeColor : props.color,
               'aria-current': isActive,
               'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
@@ -315,7 +315,7 @@ export const VPagination = genericComponent<VPaginationSlots>()({
     }
 
     function onKeydown (e: KeyboardEvent) {
-      if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
+      if (e.key === keyValues.left && !props.disabled && page.value > Number(props.start)) {
         page.value = page.value - 1
         nextTick(updateFocus)
       } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
diff --git a/packages/vuetify/src/components/VParallax/VParallax.tsx b/packages/vuetify/src/components/VParallax/VParallax.tsx
@@ -66,7 +66,7 @@ export const VParallax = genericComponent<VImgSlots>()({
     watch(() => contentRect.value?.height, onScroll)
 
     const scale = computed(() => {
-      return 1 - clamp(+props.scale)
+      return 1 - clamp(Number(props.scale))
     })
 
     let frame = -1
diff --git a/packages/vuetify/src/components/VRating/VRating.tsx b/packages/vuetify/src/components/VRating/VRating.tsx
@@ -101,7 +101,7 @@ export const VRating = genericComponent<VRatingSlots>()({
     const { t } = useLocale()
     const { themeClasses } = provideTheme(props)
     const rating = useProxiedModel(props, 'modelValue')
-    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length))
+    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, Number(props.length)))
 
     const range = computed(() => createRange(Number(props.length), 1))
     const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]))
diff --git a/packages/vuetify/src/components/VSlider/slider.ts b/packages/vuetify/src/components/VSlider/slider.ts
@@ -149,7 +149,7 @@ type SliderData = {
 export const useSteps = (props: SliderProps) => {
   const min = computed(() => parseFloat(props.min))
   const max = computed(() => parseFloat(props.max))
-  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0)
+  const step = computed(() => Number(props.step) > 0 ? parseFloat(props.step) : 0)
   const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)))
 
   function roundValue (value: string | number) {
diff --git a/packages/vuetify/src/components/VSparkline/VBarline.tsx b/packages/vuetify/src/components/VSparkline/VBarline.tsx
@@ -90,7 +90,7 @@ export const VBarline = genericComponent<VBarlineSlots>()({
         return {
           x: minX + index * gridX,
           y: horizonY - height +
-            +(value < 0) * height,
+            Number(value < 0) * height,
           height,
           value,
         }
diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -150,10 +150,10 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
     }
 
     const sizerRef = ref<HTMLTextAreaElement>()
-    const rows = ref(+props.rows)
+    const rows = ref(Number(props.rows))
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant))
     watchEffect(() => {
-      if (!props.autoGrow) rows.value = +props.rows
+      if (!props.autoGrow) rows.value = Number(props.rows)
     })
     function calculateInputHeight () {
       if (!props.autoGrow) return
diff --git a/packages/vuetify/src/composables/stack.ts b/packages/vuetify/src/composables/stack.ts
@@ -30,10 +30,10 @@ export function useStack (
   })
   provide(StackSymbol, stack)
 
-  const _zIndex = shallowRef(+zIndex.value)
+  const _zIndex = shallowRef(Number(zIndex.value))
   useToggleScope(isActive, () => {
     const lastZIndex = globalStack.at(-1)?.[1]
-    _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value
+    _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value)
 
     if (createStackEntry) {
       globalStack.push([vm.uid, _zIndex.value])
diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts
@@ -92,7 +92,7 @@ export function useValidation (
   ))
   const errorMessages = computed(() => {
     return props.errorMessages?.length
-      ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors))
+      ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, Number(props.maxErrors)))
       : internalErrorMessages.value
   })
   const validateOn = computed(() => {
@@ -197,7 +197,7 @@ export function useValidation (
     isValidating.value = true
 
     for (const rule of props.rules) {
-      if (results.length >= +(props.maxErrors ?? 1)) {
+      if (results.length >= Number(props.maxErrors ?? 1)) {
         break
       }
 
diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -99,7 +99,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       val => val ?? null,
       val => val == null
         ? val ?? null
-        : clamp(+val, props.min, props.max)
+        : clamp(Number(val), props.min, props.max)
     )
 
     const _inputText = shallowRef<string | null>(null)
@@ -118,8 +118,8 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
         if (val === null || val === '') {
           model.value = null
           _inputText.value = null
-        } else if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
-          model.value = +val
+        } else if (!isNaN(Number(val)) && Number(val) <= props.max && Number(val) >= props.min) {
+          model.value = Number(val)
           _inputText.value = val
         }
       },
@@ -266,8 +266,8 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       if (controlsDisabled.value) return
       if (!vTextFieldRef.value) return
       const actualText = vTextFieldRef.value.value
-      if (actualText && !isNaN(+actualText)) {
-        inputText.value = correctPrecision(clamp(+actualText, props.min, props.max))
+      if (actualText && !isNaN(Number(actualText))) {
+        inputText.value = correctPrecision(clamp(Number(actualText), props.min, props.max))
       } else {
         inputText.value = null
       }
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
@@ -95,8 +95,8 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
       const maxHour = props.max ? Number(props.max.split(':')[0]) : 23
 
       return (val: number) => {
-        return val >= minHour * 1 &&
-          val <= maxHour * 1 &&
+        return val >= Number(minHour) &&
+          val <= Number(maxHour) &&
           (!cb || cb(val))
       }
     })
@@ -117,8 +117,8 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
 
       const [minHour, minMinute] = props.min ? props.min.split(':').map(Number) : [0, 0]
       const [maxHour, maxMinute] = props.max ? props.max.split(':').map(Number) : [23, 59]
-      const minTime = minHour * 60 + minMinute * 1
-      const maxTime = maxHour * 60 + maxMinute * 1
+      const minTime = minHour * 60 + Number(minMinute)
+      const maxTime = maxHour * 60 + Number(maxMinute)
 
       return (val: number) => {
         const time = 60 * inputHour.value! + val
@@ -151,8 +151,8 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
 
       const [minHour, minMinute, minSecond] = props.min ? props.min.split(':').map(Number) : [0, 0, 0]
       const [maxHour, maxMinute, maxSecond] = props.max ? props.max.split(':').map(Number) : [23, 59, 59]
-      const minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1
-      const maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1
+      const minTime = minHour * 3600 + minMinute * 60 + Number(minSecond || 0)
+      const maxTime = maxHour * 3600 + maxMinute * 60 + Number(maxSecond || 0)
 
       return (val: number) => {
         const time = 3600 * inputHour.value! + 60 * inputMinute.value! + val
diff --git a/packages/vuetify/src/locale/adapters/vuetify.ts b/packages/vuetify/src/locale/adapters/vuetify.ts
@@ -16,7 +16,7 @@ const LANG_PREFIX = '$vuetify.'
 
 const replace = (str: string, params: unknown[]) => {
   return str.replace(/\{(\d+)\}/g, (match: string, index: string) => {
-    return String(params[+index])
+    return String(params[Number(index)])
   })
 }
 
diff --git a/packages/vuetify/src/util/__tests__/helpers.spec.ts b/packages/vuetify/src/util/__tests__/helpers.spec.ts
@@ -190,7 +190,7 @@ describe('helpers', () => {
     expect(getPropertyFromItem(obj, 'c.0')).toBe(2)
     expect(getPropertyFromItem(obj, 'c.2.d')).toBe('d')
     expect(getPropertyFromItem(obj, 'c.2.d.x', 'fallback')).toBe('fallback')
-    expect(getPropertyFromItem(obj, o => +o.a.b + +o.c[0])).toBe(3)
+    expect(getPropertyFromItem(obj, o => Number(o.a.b) + Number(o.c[0]))).toBe(3)
     expect(getPropertyFromItem(obj, ['c', 2, 'd'])).toBe('d')
     expect(getPropertyFromItem(obj, 'x.y')).toBe('comp')
     expect(getPropertyFromItem(obj, ['x', 'y'])).toBe('nested')
diff --git a/packages/vuetify/src/util/animation.ts b/packages/vuetify/src/util/animation.ts
@@ -11,16 +11,16 @@ export function nullifyTransforms (el: HTMLElement): Box {
     let ta, sx, sy, dx, dy
     if (tx.startsWith('matrix3d(')) {
       ta = tx.slice(9, -1).split(/, /)
-      sx = +ta[0]
-      sy = +ta[5]
-      dx = +ta[12]
-      dy = +ta[13]
+      sx = Number(ta[0])
+      sy = Number(ta[5])
+      dx = Number(ta[12])
+      dy = Number(ta[13])
     } else if (tx.startsWith('matrix(')) {
       ta = tx.slice(7, -1).split(/, /)
-      sx = +ta[0]
-      sy = +ta[3]
-      dx = +ta[4]
-      dy = +ta[5]
+      sx = Number(ta[0])
+      sy = Number(ta[3])
+      dx = Number(ta[4])
+      dy = Number(ta[5])
     } else {
       return new Box(rect)
     }
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
@@ -111,7 +111,7 @@ export function createRange (length: number, start = 0): number[] {
 export function getZIndex (el?: Element | null): number {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) return 0
 
-  const index = +window.getComputedStyle(el).getPropertyValue('z-index')
+  const index = Number(window.getComputedStyle(el).getPropertyValue('z-index'))
 
   if (!index) return getZIndex(el.parentNode as Element)
   return index
@@ -122,12 +122,14 @@ export function convertToUnit (str: string | number | null | undefined, unit?: s
 export function convertToUnit (str: string | number | null | undefined, unit = 'px'): string | undefined {
   if (str == null || str === '') {
     return undefined
-  } else if (isNaN(+str!)) {
+  }
+  const num = Number(str)
+  if (isNaN(num)) {
     return String(str)
-  } else if (!isFinite(+str!)) {
+  } else if (!isFinite(num)) {
     return undefined
   } else {
-    return `${Number(str)}${unit}`
+    return `${num}${unit}`
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -115,10 +115,10 @@ function parseFixedColumns (items: InternalDataTableHeader[]) {`
`115`	`115`	`} else {`
`116`	`116`	`if (!seenFixed) {`
`117`	`117`	`item.lastFixed = true`
`118`		`- } else if (isNaN(+item.width!)) {`
	`118`	`+ } else if (isNaN(Number(item.width))) {`
`119`	`119`	consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`)
`120`	`120`	`} else {`
`121`		`- item.minWidth = Math.max(+item.width! \|\| 0, +item.minWidth! \|\| 0)`
	`121`	`+ item.minWidth = Math.max(Number(item.width) \|\| 0, Number(item.minWidth) \|\| 0)`
`122`	`122`	`}`
`123`	`123`	`seenFixed = true`
`124`	`124`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,8 +43,8 @@ type PaginationProps = {`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`export function createPagination (props: PaginationProps) {`
`46`		`- const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1))`
`47`		`- const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10))`
	`46`	`+ const page = useProxiedModel(props, 'page', undefined, value => Number(value ?? 1))`
	`47`	`+ const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => Number(value ?? 10))`
`48`	`48`
`49`	`49`	`return { page, itemsPerPage }`
`50`	`50`	`}`