TextBox Utils: Improve typing (#32550)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/ui/text_box/m_utils.caret.ts

@@ -9,11 +9,8 @@ export interface CaretRange {
   end: number;
 }
 
-const {
-  ios,
-  // @ts-expect-error Device type doesn't contain mac
-  mac,
-} = devices.real();
+// @ts-expect-error mac should be correctly typed in environment.d.ts
+const { ios, mac } = devices.real();
 
 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
 const isFocusingOnCaretChange = ios || mac;

packages/devextreme/js/__internal/ui/text_box/m_utils.scroll.ts

@@ -1,55 +1,77 @@
 import { isDxMouseWheelEvent } from '@js/common/core/events/utils/index';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { PointerInteractionEvent } from '@js/events';
 
-// @ts-expect-error
-const allowScroll = function (container, delta, shiftKey?: boolean) {
+type PointerInteractionEventTarget = Element | null;
+
+interface TextBoxScrollData {
+  validate: (e: PointerInteractionEvent & {
+    target?: PointerInteractionEventTarget;
+    delta?: number;
+    _needSkipEvent?: boolean;
+  }) => boolean;
+}
+
+export const allowScroll = (
+  container: dxElementWrapper,
+  delta: number,
+  shiftKey?: boolean,
+): boolean | undefined => {
   const $container = $(container);
-  const scrollTopPos = shiftKey ? $container.scrollLeft() : $container.scrollTop();
+  // @ts-expect-error scrollLeft, scrollTop should be correctly typed in renderer.d.ts
+  const scrollTopPos = parseFloat(shiftKey ? $container.scrollLeft() : $container.scrollTop());
 
   const prop = shiftKey ? 'Width' : 'Height';
-  // @ts-expect-error
-  const scrollSize = $container.prop(`scroll${prop}`);
-  // @ts-expect-error
-  const clientSize = $container.prop(`client${prop}`);
-  // @ts-expect-error
+
+  // @ts-expect-error prop should be correctly typed in renderer.d.ts
+  const scrollSize = parseFloat($container.prop(`scroll${prop}`));
+  // @ts-expect-error prop should be correctly typed in renderer.d.ts
+  const clientSize = parseFloat($container.prop(`client${prop}`));
+
   // NOTE: round to the nearest integer towards zero
   const scrollBottomPos = (scrollSize - clientSize - scrollTopPos) | 0;
-  // @ts-expect-error
+
   if (scrollTopPos === 0 && scrollBottomPos === 0) {
     return false;
   }
-  // @ts-expect-error
+
   const isScrollFromTop = scrollTopPos === 0 && delta >= 0;
   const isScrollFromBottom = scrollBottomPos === 0 && delta <= 0;
-  // @ts-expect-error
   const isScrollFromMiddle = scrollTopPos > 0 && scrollBottomPos > 0;
 
   if (isScrollFromTop || isScrollFromBottom || isScrollFromMiddle) {
     return true;
   }
+
+  return undefined;
 };
 
-const prepareScrollData = function (container, validateTarget?: any) {
+export const prepareScrollData = (
+  container: dxElementWrapper,
+  validateTarget?: boolean,
+): TextBoxScrollData => {
   const $container = $(container);
-  const isCorrectTarget = function (eventTarget) {
-    return validateTarget ? $(eventTarget).is(container) : true;
-  };
 
-  return {
-    // @ts-expect-error
-    validate(e) {
+  const isCorrectTarget = (
+    eventTarget: PointerInteractionEventTarget,
+  ): boolean => (validateTarget ? $(eventTarget).is(container) : true);
+
+  const scrollData: TextBoxScrollData = {
+    validate: (e) => {
       if (isDxMouseWheelEvent(e) && isCorrectTarget(e.target)) {
-        if (allowScroll($container, -e.delta, e.shiftKey)) {
+        if (allowScroll($container, -(e.delta ?? 0), e.shiftKey)) {
           e._needSkipEvent = true;
+
           return true;
         }
+
         return false;
       }
+
+      return false;
     },
   };
-};
 
-export {
-  allowScroll,
-  prepareScrollData,
+  return scrollData;
 };