Enable no-unsafe-call eslint rule

.eslintrc.js

@@ -100,7 +100,6 @@ module.exports = {
         __DEV__: 'readonly',
     },
     rules: {
-        '@typescript-eslint/no-unsafe-call': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',
         '@typescript-eslint/no-unsafe-assignment': 'off',
 

.github/actions/javascript/getGraphiteString/getGraphiteString.ts

@@ -1,6 +1,15 @@
 import * as core from '@actions/core';
 import fs from 'fs';
 
+type RegressionEntryProps = {
+    metadata?: {
+        creationDate: string;
+    };
+    name: string;
+    meanDuration: number;
+    meanCount: number;
+};
+
 const run = () => {
     // Prefix path to the graphite metric
     const GRAPHITE_PATH = 'reassure';
@@ -24,11 +33,11 @@ const run = () => {
         }
 
         try {
-            const current = JSON.parse(entry);
+            const current: RegressionEntryProps = JSON.parse(entry);
 
             // Extract timestamp, Graphite accepts timestamp in seconds
             if (current.metadata?.creationDate) {
-                timestamp = Math.floor(new Date(current.metadata.creationDate as string).getTime() / 1000);
+                timestamp = Math.floor(new Date(current.metadata.creationDate).getTime() / 1000);
             }
 
             if (current.name && current.meanDuration && current.meanCount && timestamp) {

.github/libs/GitUtils.ts

@@ -66,11 +66,11 @@ function getCommitHistoryAsJSON(fromTag: string, toTag: string): Promise<CommitT
         console.log(`Running command: git ${args.join(' ')}`);
         const spawnedProcess = spawn('git', args);
         spawnedProcess.on('message', console.log);
-        spawnedProcess.stdout.on('data', (chunk) => {
+        spawnedProcess.stdout.on('data', (chunk: Buffer) => {
             console.log(chunk.toString());
             stdout += chunk.toString();
         });
-        spawnedProcess.stderr.on('data', (chunk) => {
+        spawnedProcess.stderr.on('data', (chunk: Buffer) => {
             console.error(chunk.toString());
             stderr += chunk.toString();
         });

.storybook/webpack.config.ts

@@ -3,6 +3,7 @@
 /* eslint-disable no-param-reassign */
 
 /* eslint-disable @typescript-eslint/naming-convention */
+import type Environment from 'config/webpack/types';
 import dotenv from 'dotenv';
 import path from 'path';
 import {DefinePlugin} from 'webpack';
@@ -18,6 +19,8 @@ type CustomWebpackConfig = {
     };
 };
 
+type CustomWebpackFunctionProps = ({file, platform}: Environment) => CustomWebpackConfig;
+
 let envFile: string;
 switch (process.env.ENV) {
     case 'production':
@@ -31,9 +34,9 @@ switch (process.env.ENV) {
 }
 
 const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)});
-const custom: CustomWebpackConfig = require('../config/webpack/webpack.common').default({
-    envFile,
-});
+const customFunction: CustomWebpackFunctionProps = require('../config/webpack/webpack.common');
+
+const custom: CustomWebpackConfig = customFunction({file: envFile});
 
 const webpackConfig = ({config}: {config: Configuration}) => {
     if (!config.resolve) {

config/webpack/webpack.common.ts

@@ -4,14 +4,27 @@ import dotenv from 'dotenv';
 import fs from 'fs';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
-import type {Configuration} from 'webpack';
+import type {Compiler, Configuration} from 'webpack';
 import {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webpack';
 import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
 import CustomVersionFilePlugin from './CustomVersionFilePlugin';
 import type Environment from './types';
 
+// importing anything from @vue/preload-webpack-plugin causes an error
+type Options = {
+    rel: string;
+    as: string;
+    fileWhitelist: RegExp[];
+    include: string;
+};
+
+type PreloadWebpackPluginProps = {
+    new (options?: Options): PreloadWebpackPluginProps;
+    apply: (compiler: Compiler) => void;
+};
+
 // require is necessary, there are no types for this package and the declaration file can't be seen by the build process which causes an error.
-const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
+const PreloadWebpackPlugin: PreloadWebpackPluginProps = require('@vue/preload-webpack-plugin');
 
 const includeModules = [
     'react-native-animatable',

jest/setup.ts

@@ -21,8 +21,8 @@ jest.mock('react-native-onyx/dist/storage', () => mockStorage);
 jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
 
 // Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
-jest.spyOn(console, 'debug').mockImplementation((...params) => {
-    if (params[0].indexOf('Timing:') === 0) {
+jest.spyOn(console, 'debug').mockImplementation((...params: string[]) => {
+    if (params[0].startsWith('Timing:')) {
         return;
     }
 

src/components/AmountForm.tsx

@@ -12,6 +12,7 @@ import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
 import BigNumberPad from './BigNumberPad';
 import FormHelpMessage from './FormHelpMessage';
+import isAnimatedTextInputFocused from './TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
 import type TextInputWithCurrencySymbolProps from './TextInputWithCurrencySymbol/types';
@@ -94,7 +95,7 @@ function AmountForm(
         if (!textInput.current) {
             return;
         }
-        if (!textInput.current.isFocused()) {
+        if (!isAnimatedTextInputFocused(textInput)) {
             textInput.current.focus();
         }
     };
@@ -143,7 +144,7 @@ function AmountForm(
      */
     const updateAmountNumberPad = useCallback(
         (key: string) => {
-            if (shouldUpdateSelection && !textInput.current?.isFocused()) {
+            if (shouldUpdateSelection && !isAnimatedTextInputFocused(textInput)) {
                 textInput.current?.focus();
             }
             // Backspace button is pressed
@@ -168,7 +169,7 @@ function AmountForm(
      */
     const updateLongPressHandlerState = useCallback((value: boolean) => {
         setShouldUpdateSelection(!value);
-        if (!value && !textInput.current?.isFocused()) {
+        if (!value && !isAnimatedTextInputFocused(textInput)) {
             textInput.current?.focus();
         }
     }, []);

src/components/EmojiPicker/EmojiPickerMenu/index.tsx

@@ -7,6 +7,7 @@ import {scrollTo} from 'react-native-reanimated';
 import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import isAnimatedTextInputFocused from '@components/TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useLocalize from '@hooks/useLocalize';
@@ -86,7 +87,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             }
 
             // If the input is not focused and the new index is out of range, focus the input
-            if (newIndex < 0 && !searchInputRef.current?.isFocused() && shouldFocusInputOnScreenFocus) {
+            if (newIndex < 0 && !isAnimatedTextInputFocused(searchInputRef) && shouldFocusInputOnScreenFocus) {
                 searchInputRef.current?.focus();
             }
         },
@@ -165,12 +166,12 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input
             // is not focused, so that the navigation and tab cycling can be done using the keyboard without
             // interfering with the input behaviour.
-            if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !searchInputRef.current.isFocused())) {
+            if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !isAnimatedTextInputFocused(searchInputRef))) {
                 setIsUsingKeyboardMovement(true);
             }
 
             // We allow typing in the search box if any key is pressed apart from Arrow keys.
-            if (searchInputRef.current && !searchInputRef.current.isFocused() && ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) {
+            if (searchInputRef.current && !isAnimatedTextInputFocused(searchInputRef) && ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) {
                 searchInputRef.current.focus();
             }
         },

src/components/Hoverable/ActiveHoverable.tsx

@@ -8,6 +8,8 @@ import type HoverableProps from './types';
 
 type ActiveHoverableProps = Omit<HoverableProps, 'disabled'>;
 
+type OnMouseEventProps = (e: MouseEvent) => void;
+
 function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreezeCapture, children}: ActiveHoverableProps, outerRef: Ref<HTMLElement>) {
     const [isHovered, setIsHovered] = useState(false);
 
@@ -98,9 +100,10 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
 
     const child = useMemo(() => getReturnValue(children, !isScrollingRef.current && isHovered), [children, isHovered]);
 
-    const childOnMouseEnter = child.props.onMouseEnter;
-    const childOnMouseLeave = child.props.onMouseLeave;
-    const childOnMouseMove = child.props.onMouseMove;
+    const childOnMouseEnter: OnMouseEventProps = child.props.onMouseEnter;
+    const childOnMouseLeave: OnMouseEventProps = child.props.onMouseLeave;
+    const childOnMouseMove: OnMouseEventProps = child.props.onMouseMove;
+    const childOnBlur: OnMouseEventProps = child.props.onBlur;
 
     const hoverAndForwardOnMouseEnter = useCallback(
         (e: MouseEvent) => {
@@ -127,9 +130,9 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
                 setIsHovered(false);
             }
 
-            child.props.onBlur?.(event);
+            childOnBlur?.(event);
         },
-        [child.props],
+        [childOnBlur],
     );
 
     const handleAndForwardOnMouseMove = useCallback(

src/components/MoneyRequestAmountInput.tsx

@@ -8,6 +8,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
+import isAnimatedTextInputFocused from './TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
 
@@ -196,7 +197,7 @@ function MoneyRequestAmountInput(
     }));
 
     useEffect(() => {
-        if (!currency || typeof amount !== 'number' || (formatAmountOnBlur && textInput.current?.isFocused()) || shouldKeepUserInput) {
+        if ((!currency || typeof amount !== 'number' || (formatAmountOnBlur && isAnimatedTextInputFocused(textInput))) ?? shouldKeepUserInput) {
             return;
         }
         const frontendAmount = onFormatAmount(amount, currency);

src/components/TextInput/BaseTextInput/isAnimatedTextInputFocused.ts

@@ -0,0 +1,7 @@
+import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import type {BaseTextInputRef} from './types';
+
+/**  Checks that text input has the isFocused method and is focused. */
+export default function isAnimatedTextInputFocused(textInput: React.MutableRefObject<BaseTextInputRef | null>): boolean | null {
+    return textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused();
+}

src/components/Tooltip/BaseTooltip/index.tsx

@@ -188,7 +188,8 @@ function Tooltip(
         (e: MouseEvent) => {
             updateTargetAndMousePosition(e);
             if (React.isValidElement(children)) {
-                children.props.onMouseEnter?.(e);
+                const onMouseEnter: (e: MouseEvent) => void | undefined = children.props.onMouseEnter;
+                onMouseEnter?.(e);
             }
         },
         [children, updateTargetAndMousePosition],

src/components/Tooltip/PopoverAnchorTooltip.tsx

@@ -10,8 +10,14 @@ function PopoverAnchorTooltip({shouldRender = true, children, ...props}: Tooltip
 
     const isPopoverRelatedToTooltipOpen = useMemo(() => {
         // eslint-disable-next-line @typescript-eslint/dot-notation
-        const tooltipNode = tooltipRef.current?.['_childNode'] ?? null;
-        if (isOpen && popover?.anchorRef?.current && tooltipNode && (tooltipNode.contains(popover.anchorRef.current) || tooltipNode === popover.anchorRef.current)) {
+        const tooltipNode: Node | null = tooltipRef.current?.['_childNode'] ?? null;
+
+        if (
+            isOpen &&
+            popover?.anchorRef?.current &&
+            tooltipNode &&
+            ((popover.anchorRef.current instanceof Node && tooltipNode.contains(popover.anchorRef.current)) || tooltipNode === popover.anchorRef.current)
+        ) {
             return true;
         }
 

src/components/WalletStatementModal/index.tsx

@@ -18,7 +18,7 @@ function WalletStatementModal({statementPageURL, session}: WalletStatementProps)
     /**
      * Handles in-app navigation for iframe links
      */
-    const navigate = (event: MessageEvent) => {
+    const navigate = (event: MessageEvent<{url: string; type: string}>) => {
         if (!event.data?.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
             return;
         }

src/libs/Environment/betaChecker/index.android.ts

@@ -4,7 +4,7 @@ import * as AppUpdate from '@libs/actions/AppUpdate';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import pkg from '../../../../package.json';
-import type IsBetaBuild from './types';
+import type {IsBetaBuild} from './types';
 
 let isLastSavedBeta = false;
 Onyx.connect({

src/libs/Environment/betaChecker/index.ios.ts

@@ -1,5 +1,5 @@
 import {NativeModules} from 'react-native';
-import type IsBetaBuild from './types';
+import type {IsBetaBuild} from './types';
 
 /**
  * Check to see if the build is staging (TestFlight) or production

src/libs/Environment/betaChecker/index.ts

@@ -1,4 +1,4 @@
-import type IsBetaBuild from './types';
+import type {IsBetaBuild} from './types';
 
 /**
  * There's no beta build in non native

src/libs/Environment/betaChecker/types.ts

@@ -1,3 +1,7 @@
 type IsBetaBuild = Promise<boolean>;
 
-export default IsBetaBuild;
+type EnvironmentCheckerModule = {
+    isBeta: () => IsBetaBuild;
+};
+
+export type {IsBetaBuild, EnvironmentCheckerModule};

src/libs/Performance.tsx

@@ -3,7 +3,7 @@ import isObject from 'lodash/isObject';
 import lodashTransform from 'lodash/transform';
 import React, {forwardRef, Profiler} from 'react';
 import {Alert, InteractionManager} from 'react-native';
-import type {PerformanceEntry, PerformanceMark, PerformanceMeasure, Performance as RNPerformance} from 'react-native-performance';
+import type {PerformanceEntry, PerformanceMark, PerformanceMeasure, Performance as RNPerformance, PerformanceObserver as RNPerformanceObserver} from 'react-native-performance';
 import type {PerformanceObserverEntryList} from 'react-native-performance/lib/typescript/performance-observer';
 import CONST from '@src/CONST';
 import isE2ETestSession from './E2E/isE2ETestSession';
@@ -46,6 +46,12 @@ type PerformanceModule = {
     subscribeToMeasurements: SubscribeToMeasurements;
 };
 
+type ReactNativePerformance = {
+    default: RNPerformance;
+    setResourceLoggingEnabled: (enabled?: boolean) => void;
+    PerformanceObserver: typeof RNPerformanceObserver;
+};
+
 let rnPerformance: RNPerformance;
 
 /**
@@ -86,7 +92,7 @@ const Performance: PerformanceModule = {
 };
 
 if (Metrics.canCapturePerformanceMetrics()) {
-    const perfModule = require('react-native-performance');
+    const perfModule: ReactNativePerformance = require('react-native-performance');
     perfModule.setResourceLoggingEnabled(true);
     rnPerformance = perfModule.default;
 

src/libs/updateMultilineInputRange/index.ts

@@ -15,9 +15,9 @@ const updateMultilineInputRange: UpdateMultilineInputRange = (input, shouldAutoF
     }
 
     if ('value' in input && input.value && input.setSelectionRange) {
-        const length = input.value.length;
-        if (shouldAutoFocus) {
-            input.setSelectionRange(length, length);
+        const length = input.value.length as number;
+        if (shouldAutoFocus && 'setSelectionRange' in input) {
+            (input as HTMLInputElement).setSelectionRange(length, length);
         }
         // eslint-disable-next-line no-param-reassign
         input.scrollTop = input.scrollHeight;

src/pages/iou/MoneyRequestAmountForm.tsx

@@ -10,6 +10,7 @@ import MoneyRequestAmountInput from '@components/MoneyRequestAmountInput';
 import type {MoneyRequestAmountInputRef} from '@components/MoneyRequestAmountInput';
 import ScrollView from '@components/ScrollView';
 import SettlementButton from '@components/SettlementButton';
+import isAnimatedTextInputFocused from '@components/TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -130,7 +131,8 @@ function MoneyRequestAmountForm(
         if (!textInput.current) {
             return;
         }
-        if (!textInput.current.isFocused()) {
+
+        if (!isAnimatedTextInputFocused(textInput)) {
             textInput.current.focus();
         }
     };
@@ -171,7 +173,7 @@ function MoneyRequestAmountForm(
      */
     const updateAmountNumberPad = useCallback(
         (key: string) => {
-            if (shouldUpdateSelection && !textInput.current?.isFocused()) {
+            if (shouldUpdateSelection && !isAnimatedTextInputFocused(textInput)) {
                 textInput.current?.focus();
             }
             const currentAmount = moneyRequestAmountInput.current?.getAmount() ?? '';
@@ -198,7 +200,7 @@ function MoneyRequestAmountForm(
      */
     const updateLongPressHandlerState = useCallback((value: boolean) => {
         setShouldUpdateSelection(!value);
-        if (!value && !textInput.current?.isFocused()) {
+        if (!value && !isAnimatedTextInputFocused(textInput)) {
             textInput.current?.focus();
         }
     }, []);