Enable no-unsafe-member-access eslint rule

.eslintrc.js

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

.github/actions/javascript/authorChecklist/categories/newComponentCategory.ts

@@ -1,4 +1,5 @@
 import * as github from '@actions/github';
+import type {WebhookPayload} from '@actions/github/lib/interfaces';
 import {parse} from '@babel/parser';
 import traverse from '@babel/traverse';
 import CONST from '@github/libs/CONST';
@@ -8,6 +9,15 @@ import type Category from './Category';
 
 type SuperClassType = {superClass: {name?: string; object: {name: string}; property: {name: string}} | null; name: string};
 
+type GithubPaylod = WebhookPayload & {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    pull_request?: {
+        head: {
+            ref?: string;
+        };
+    };
+};
+
 const items = [
     "I verified that similar component doesn't exist in the codebase",
     'I verified that all props are defined accurately and each prop has a `/** comment above it */`',
@@ -77,7 +87,7 @@ async function detectReactComponentInFile(filename: string): Promise<boolean | u
         owner: CONST.GITHUB_OWNER,
         repo: CONST.APP_REPO,
         path: filename,
-        ref: github.context.payload.pull_request?.head.ref,
+        ref: (github.context.payload as GithubPaylod)?.pull_request?.head.ref,
     };
     try {
         const {data} = await GithubUtils.octokit.repos.getContent(params);

.github/actions/javascript/authorChecklist/index.js

@@ -16967,7 +16967,7 @@ async function detectReactComponentInFile(filename) {
         owner: CONST_1.default.GITHUB_OWNER,
         repo: CONST_1.default.APP_REPO,
         path: filename,
-        ref: github.context.payload.pull_request?.head.ref,
+        ref: github.context.payload?.pull_request?.head.ref,
     };
     try {
         const { data } = await GithubUtils_1.default.octokit.repos.getContent(params);

.github/actions/javascript/createOrUpdateStagingDeploy/createOrUpdateStagingDeploy.ts

@@ -8,10 +8,14 @@ import GitUtils from '@github/libs/GitUtils';
 
 type IssuesCreateResponse = Awaited<ReturnType<typeof GithubUtils.octokit.issues.create>>['data'];
 
+type PackageJSON = {
+    version: string;
+};
+
 async function run(): Promise<IssuesCreateResponse | void> {
     // Note: require('package.json').version does not work because ncc will resolve that to a plain string at compile time
-    const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-    const newVersionTag: string = packageJson.version;
+    const packageJson: PackageJSON = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+    const newVersionTag = packageJson.version;
 
     try {
         // Start by fetching the list of recent StagingDeployCash issues, along with the list of open deploy blockers

.storybook/webpack.config.ts

@@ -34,7 +34,7 @@ switch (process.env.ENV) {
 }
 
 const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)});
-const customFunction: CustomWebpackFunction = require('../config/webpack/webpack.common').default;
+const customFunction = require<{default: CustomWebpackFunction}>('../config/webpack/webpack.common').default;
 
 const custom: CustomWebpackConfig = customFunction({file: envFile});
 

__mocks__/react-native-webview.ts

@@ -1,8 +1,8 @@
 import type {View as RNView} from 'react-native';
 
 jest.mock('react-native-webview', () => {
-    const {View} = require('react-native');
+    const {View} = require<{View: RNView}>('react-native');
     return {
-        WebView: () => View as RNView,
+        WebView: () => View,
     };
 });

desktop/main.ts

@@ -16,7 +16,7 @@ import type {Locale} from '@src/types/onyx';
 import type {CreateDownloadQueue, DownloadItem} from './createDownloadQueue';
 import ELECTRON_EVENTS from './ELECTRON_EVENTS';
 
-const createDownloadQueue: CreateDownloadQueue = require('./createDownloadQueue').default;
+const createDownloadQueue = require<{default: CreateDownloadQueue}>('./createDownloadQueue').default;
 
 const port = process.env.PORT ?? 8082;
 const {DESKTOP_SHORTCUT_ACCELERATOR, LOCALES} = CONST;

src/components/AttachmentModal.tsx

@@ -306,7 +306,7 @@ function AttachmentModal({
     }, []);
 
     const isDirectoryCheck = useCallback((data: FileObject) => {
-        if ('webkitGetAsEntry' in data && typeof data.webkitGetAsEntry === 'function' && data.webkitGetAsEntry().isDirectory) {
+        if ('webkitGetAsEntry' in data && (data as DataTransferItem).webkitGetAsEntry()?.isDirectory) {
             setIsAttachmentInvalid(true);
             setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
             setAttachmentInvalidReason('attachmentPicker.folderNotAllowedMessage');

src/components/AttachmentPicker/launchCamera/launchCamera.android.ts

@@ -19,7 +19,7 @@ const launchCamera: LaunchCamera = (options, callback) => {
 
             launchCameraImagePicker(options, callback);
         })
-        .catch((error) => {
+        .catch((error: ErrorLaunchCamera) => {
             /* Intercept the permission error as well as any other errors and call the callback
              * follow the same pattern expected for image picker results */
             callback({

src/components/AttachmentPicker/launchCamera/launchCamera.ios.ts

@@ -19,7 +19,7 @@ const launchCamera: LaunchCamera = (options, callback) => {
 
             launchCameraImagePicker(options, callback);
         })
-        .catch((error) => {
+        .catch((error: ErrorLaunchCamera) => {
             /* Intercept the permission error as well as any other errors and call the callback
              * follow the same pattern expected for image picker results */
             callback({

src/components/Hoverable/ActiveHoverable.tsx

@@ -8,7 +8,9 @@ import type HoverableProps from './types';
 
 type ActiveHoverableProps = Omit<HoverableProps, 'disabled'>;
 
-type OnMouseEvent = (e: MouseEvent) => void;
+type MouseEvents = 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onBlur';
+
+type OnMouseEvents = Record<MouseEvents, (e: MouseEvent) => void>;
 
 function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreezeCapture, children}: ActiveHoverableProps, outerRef: Ref<HTMLElement>) {
     const [isHovered, setIsHovered] = useState(false);
@@ -100,26 +102,23 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
 
     const child = useMemo(() => getReturnValue(children, !isScrollingRef.current && isHovered), [children, isHovered]);
 
-    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 {onMouseEnter, onMouseLeave, onMouseMove, onBlur}: OnMouseEvents = child.props;
 
     const hoverAndForwardOnMouseEnter = useCallback(
         (e: MouseEvent) => {
             isVisibiltyHidden.current = false;
             updateIsHovered(true);
-            childOnMouseEnter?.(e);
+            onMouseEnter?.(e);
         },
-        [updateIsHovered, childOnMouseEnter],
+        [updateIsHovered, onMouseEnter],
     );
 
     const unhoverAndForwardOnMouseLeave = useCallback(
         (e: MouseEvent) => {
             updateIsHovered(false);
-            childOnMouseLeave?.(e);
+            onMouseLeave?.(e);
         },
-        [updateIsHovered, childOnMouseLeave],
+        [updateIsHovered, onMouseLeave],
     );
 
     const unhoverAndForwardOnBlur = useCallback(
@@ -130,18 +129,18 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
                 setIsHovered(false);
             }
 
-            childOnBlur?.(event);
+            onBlur?.(event);
         },
-        [childOnBlur],
+        [onBlur],
     );
 
     const handleAndForwardOnMouseMove = useCallback(
         (e: MouseEvent) => {
             isVisibiltyHidden.current = false;
             updateIsHovered(true);
-            childOnMouseMove?.(e);
+            onMouseMove?.(e);
         },
-        [updateIsHovered, childOnMouseMove],
+        [updateIsHovered, onMouseMove],
     );
 
     return cloneElement(child, {

src/components/Modal/index.tsx

@@ -5,6 +5,7 @@ import StatusBar from '@libs/StatusBar';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
+import type {WindowState} from './types';
 
 function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = () => {}, children, shouldHandleNavigationBack, ...rest}: BaseModalProps) {
     const theme = useTheme();
@@ -22,7 +23,7 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     const hideModal = () => {
         setStatusBarColor(previousStatusBarColor);
         onModalHide();
-        if (window.history.state?.shouldGoBack) {
+        if ((window.history.state as WindowState)?.shouldGoBack) {
             window.history.back();
         }
     };

src/components/Modal/types.ts

@@ -10,6 +10,10 @@ type PopoverAnchorPosition = {
     left?: number;
 };
 
+type WindowState = {
+    shouldGoBack: boolean;
+};
+
 type BaseModalProps = Partial<ModalProps> & {
     /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
     fullscreen?: boolean;
@@ -86,4 +90,4 @@ type BaseModalProps = Partial<ModalProps> & {
 };
 
 export default BaseModalProps;
-export type {PopoverAnchorPosition};
+export type {PopoverAnchorPosition, WindowState};

src/components/Onfido/BaseOnfidoWeb.tsx

@@ -1,5 +1,4 @@
 import {Onfido as OnfidoSDK} from 'onfido-sdk-ui';
-import type {ErrorType} from 'onfido-sdk-ui/types/Types';
 import React, {forwardRef, useEffect} from 'react';
 import type {ForwardedRef} from 'react';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
@@ -12,7 +11,7 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import './index.css';
-import type {OnfidoElement, OnfidoProps} from './types';
+import type {OnfidoElement, OnfidoError, OnfidoProps} from './types';
 
 type InitializeOnfidoProps = OnfidoProps &
     Pick<LocaleContextProps, 'translate' | 'preferredLocale'> & {
@@ -93,7 +92,7 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo
             }
             onSuccess(data);
         },
-        onError: (error: ErrorType) => {
+        onError: (error: OnfidoError) => {
             const errorType = error.type;
             const errorMessage: string = error.message ?? CONST.ERROR.UNKNOWN_ERROR;
             Log.hmmm('Onfido error', {errorType, errorMessage});

src/components/Onfido/index.native.tsx

@@ -1,5 +1,4 @@
 import {OnfidoCaptureType, OnfidoCountryCode, OnfidoDocumentType, Onfido as OnfidoSDK, OnfidoTheme} from '@onfido/react-native-sdk';
-import type {ErrorType} from 'onfido-sdk-ui/types/Types';
 import React, {useEffect} from 'react';
 import {Alert, Linking} from 'react-native';
 import {checkMultiple, PERMISSIONS, RESULTS} from 'react-native-permissions';
@@ -9,7 +8,7 @@ import getPlatform from '@libs/getPlatform';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-import type {OnfidoProps} from './types';
+import type {OnfidoError, OnfidoProps} from './types';
 
 function Onfido({sdkToken, onUserExit, onSuccess, onError}: OnfidoProps) {
     const {translate} = useLocalize();
@@ -30,7 +29,7 @@ function Onfido({sdkToken, onUserExit, onSuccess, onError}: OnfidoProps) {
             },
         })
             .then(onSuccess)
-            .catch((error: ErrorType) => {
+            .catch((error: OnfidoError) => {
                 const errorMessage: string = error.message ?? CONST.ERROR.UNKNOWN_ERROR;
                 const errorType = error.type;
 

src/components/Onfido/types.ts

@@ -25,4 +25,8 @@ type OnfidoProps = {
     onError: (error?: string) => void;
 };
 
-export type {OnfidoProps, OnfidoElement, OnfidoData, OnfidoDataWithApplicantID};
+type OnfidoError = Error & {
+    type?: string;
+};
+
+export type {OnfidoProps, OnfidoElement, OnfidoData, OnfidoDataWithApplicantID, OnfidoError};

src/components/SignInButtons/GoogleSignIn/index.native.tsx

@@ -6,6 +6,7 @@ import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import type {GoogleSignInProps} from '.';
+import type GoogleError from './types';
 
 /**
  * Google Sign In method for iOS and android that returns identityToken.
@@ -27,17 +28,18 @@ function googleSignInRequest() {
         .then((token) => Session.beginGoogleSignIn(token))
         .catch((error) => {
             // Handle unexpected error shape
-            if (error === undefined || error.code === undefined) {
+            const googleError = error as GoogleError;
+            if (error === undefined || googleError.code === undefined) {
                 Log.alert(`[Google Sign In] Google sign in failed: ${error}`);
             }
             /** The logged code is useful for debugging any new errors that are not specifically handled. To decode, see:
               - The common status codes documentation: https://developers.google.com/android/reference/com/google/android/gms/common/api/CommonStatusCodes
               - The Google Sign In codes documentation: https://developers.google.com/android/reference/com/google/android/gms/auth/api/signin/GoogleSignInStatusCodes
             */
-            if (error.code === statusCodes.SIGN_IN_CANCELLED) {
+            if (googleError.code === statusCodes.SIGN_IN_CANCELLED) {
                 Log.info('[Google Sign In] Google Sign In cancelled');
             } else {
-                Log.alert(`[Google Sign In] Error Code: ${error.code}. ${error.message}`, {}, false);
+                Log.alert(`[Google Sign In] Error Code: ${googleError.code}. ${googleError.message}`, {}, false);
             }
         });
 }

src/components/SignInButtons/GoogleSignIn/types.ts

@@ -0,0 +1,5 @@
+type GoogleError = Error & {
+    code?: string;
+};
+
+export default GoogleError;

src/components/Tooltip/BaseTooltip/index.tsx

@@ -15,6 +15,10 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import callOrReturn from '@src/types/utils/callOrReturn';
 
+type MouseEvents = {
+    onMouseEnter: (e: MouseEvent) => void | undefined;
+};
+
 const hasHoverSupport = DeviceCapabilities.hasHoverSupport();
 
 /**
@@ -188,7 +192,7 @@ function Tooltip(
         (e: MouseEvent) => {
             updateTargetAndMousePosition(e);
             if (React.isValidElement(children)) {
-                const onMouseEnter: (e: MouseEvent) => void | undefined = children.props.onMouseEnter;
+                const onMouseEnter = (children.props as MouseEvents).onMouseEnter;
                 onMouseEnter?.(e);
             }
         },

src/libs/DomUtils/index.ts

@@ -8,8 +8,7 @@ const addCSS = (css: string, styleId: string) => {
     if (existingStyle) {
         if ('styleSheet' in existingStyle) {
             // Supports IE8 and below
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (existingStyle.styleSheet as any).cssText = css;
+            (existingStyle.styleSheet as CSSStyleDeclaration).cssText = css;
         } else {
             existingStyle.innerHTML = css;
         }
@@ -20,8 +19,7 @@ const addCSS = (css: string, styleId: string) => {
 
         if ('styleSheet' in styleElement) {
             // Supports IE8 and below
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (styleElement.styleSheet as any).cssText = css;
+            (styleElement.styleSheet as CSSStyleDeclaration).cssText = css;
         } else {
             styleElement.appendChild(document.createTextNode(css));
         }

src/libs/E2E/reactNativeLaunchingTest.ts

@@ -5,17 +5,14 @@
  * By doing this, we avoid bundling any E2E testing code
  * into the actual release app.
  */
-import type {ValueOf} from 'type-fest';
 import * as Metrics from '@libs/Metrics';
 import Performance from '@libs/Performance';
 import Config from 'react-native-config';
 import E2EConfig from '../../../tests/e2e/config';
 import E2EClient from './client';
 import installNetworkInterceptor from './utils/NetworkInterceptor';
 import LaunchArgs from './utils/LaunchArgs';
-import type { TestConfig } from './types';
-
-type Tests = Record<ValueOf<typeof E2EConfig.TEST_NAMES>, (config: TestConfig) => void>;
+import type {TestModule, Tests} from './types';
 
 console.debug('==========================');
 console.debug('==== Running e2e test ====');
@@ -34,11 +31,11 @@ if (!appInstanceId) {
 
 // import your test here, define its name and config first in e2e/config.js
 const tests: Tests = {
-    [E2EConfig.TEST_NAMES.AppStartTime]: require('./tests/appStartTimeTest.e2e').default,
-    [E2EConfig.TEST_NAMES.OpenChatFinderPage]: require('./tests/openChatFinderPageTest.e2e').default,
-    [E2EConfig.TEST_NAMES.ChatOpening]: require('./tests/chatOpeningTest.e2e').default,
-    [E2EConfig.TEST_NAMES.ReportTyping]: require('./tests/reportTypingTest.e2e').default,
-    [E2EConfig.TEST_NAMES.Linking]: require('./tests/linkingTest.e2e').default,
+    [E2EConfig.TEST_NAMES.AppStartTime]: require<TestModule>('./tests/appStartTimeTest.e2e').default,
+    [E2EConfig.TEST_NAMES.OpenChatFinderPage]: require<TestModule>('./tests/openChatFinderPageTest.e2e').default,
+    [E2EConfig.TEST_NAMES.ChatOpening]: require<TestModule>('./tests/chatOpeningTest.e2e').default,
+    [E2EConfig.TEST_NAMES.ReportTyping]: require<TestModule>('./tests/reportTypingTest.e2e').default,
+    [E2EConfig.TEST_NAMES.Linking]: require<TestModule>('./tests/linkingTest.e2e').default,
 };
 
 // Once we receive the TII measurement we know that the app is initialized and ready to be used: