Merge pull request #42743 from software-mansion-labs/ts/enable-no-uns…

…afe-call

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 RegressionEntry = {
+    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: RegressionEntry = 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 CustomWebpackFunction = ({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: CustomWebpackFunction = require('../config/webpack/webpack.common').default;
+
+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 PreloadWebpackPluginClass = {
+    new (options?: Options): PreloadWebpackPluginClass;
+    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: PreloadWebpackPluginClass = require('@vue/preload-webpack-plugin');
 
 const includeModules = [
     'react-native-animatable',

desktop/createDownloadQueue.ts

@@ -17,6 +17,11 @@ type DownloadItem = {
     options: Options;
 };
 
+type CreateDownloadQueue = () => {
+    enqueueDownloadItem: (item: DownloadItem) => void;
+    dequeueDownloadItem: () => DownloadItem | undefined;
+};
+
 /**
  * Returns the filename with extension based on the given name and MIME type.
  * @param name - The name of the file.
@@ -28,7 +33,7 @@ const getFilenameFromMime = (name: string, mime: string): string => {
     return `${name}.${extensions}`;
 };
 
-const createDownloadQueue = () => {
+const createDownloadQueue: CreateDownloadQueue = () => {
     const downloadItemProcessor = (item: DownloadItem): Promise<void> =>
         new Promise((resolve, reject) => {
             let downloadTimeout: NodeJS.Timeout;
@@ -114,3 +119,4 @@ const createDownloadQueue = () => {
 };
 
 export default createDownloadQueue;
+export type {DownloadItem, CreateDownloadQueue};

desktop/main.ts

@@ -13,9 +13,10 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type PlatformSpecificUpdater from '@src/setup/platformSetup/types';
 import type {Locale} from '@src/types/onyx';
+import type {CreateDownloadQueue, DownloadItem} from './createDownloadQueue';
 import ELECTRON_EVENTS from './ELECTRON_EVENTS';
 
-const createDownloadQueue = require('./createDownloadQueue').default;
+const createDownloadQueue: CreateDownloadQueue = require('./createDownloadQueue').default;
 
 const port = process.env.PORT ?? 8082;
 const {DESKTOP_SHORTCUT_ACCELERATOR, LOCALES} = CONST;
@@ -617,7 +618,7 @@ const mainWindow = (): Promise<void> => {
 
                 const downloadQueue = createDownloadQueue();
                 ipcMain.on(ELECTRON_EVENTS.DOWNLOAD, (event, downloadData) => {
-                    const downloadItem = {
+                    const downloadItem: DownloadItem = {
                         ...downloadData,
                         win: browserWindow,
                     };

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 isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused';
 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 (!isTextInputFocused(textInput)) {
             textInput.current.focus();
         }
     };
@@ -143,7 +144,7 @@ function AmountForm(
      */
     const updateAmountNumberPad = useCallback(
         (key: string) => {
-            if (shouldUpdateSelection && !textInput.current?.isFocused()) {
+            if (shouldUpdateSelection && !isTextInputFocused(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 && !isTextInputFocused(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 isTextInputFocused from '@components/TextInput/BaseTextInput/isTextInputFocused';
 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 && !isTextInputFocused(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 && !isTextInputFocused(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 && !isTextInputFocused(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 OnMouseEvent = (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: OnMouseEvent = child.props.onMouseEnter;
+    const childOnMouseLeave: OnMouseEvent = child.props.onMouseLeave;
+    const childOnMouseMove: OnMouseEvent = child.props.onMouseMove;
+    const childOnBlur: OnMouseEvent = 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

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

src/components/TextInput/BaseTextInput/isTextInputFocused.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 isTextInputFocused(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

@@ -8,7 +8,7 @@ import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
+import type {WalletStatementMessage, WalletStatementOnyxProps, WalletStatementProps} from './types';
 
 function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
     const styles = useThemeStyles();
@@ -18,7 +18,7 @@ function WalletStatementModal({statementPageURL, session}: WalletStatementProps)
     /**
      * Handles in-app navigation for iframe links
      */
-    const navigate = (event: MessageEvent) => {
+    const navigate = (event: MessageEvent<WalletStatementMessage>) => {
         if (!event.data?.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
             return;
         }

src/components/WalletStatementModal/types.ts

@@ -11,4 +11,9 @@ type WalletStatementProps = WalletStatementOnyxProps & {
     statementPageURL: string;
 };
 
-export type {WalletStatementProps, WalletStatementOnyxProps};
+type WalletStatementMessage = {
+    url: string;
+    type: string;
+};
+
+export type {WalletStatementProps, WalletStatementOnyxProps, WalletStatementMessage};

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};