[No QA] Split app TypeScript into web and native programs

config/eslint/eslint.config.mjs

@@ -718,6 +718,12 @@ const config = defineConfig([
 
     {
         files: ['modules/ExpensifyNitroUtils/src/**/*'],
+        languageOptions: {
+            parserOptions: {
+                project: path.resolve(projectRoot, 'modules/ExpensifyNitroUtils/tsconfig.json'),
+                projectService: false,
+            },
+        },
         rules: {
             '@typescript-eslint/consistent-type-definitions': 'off',
         },
@@ -734,6 +740,16 @@ const config = defineConfig([
         },
     },
 
+    {
+        files: ['types/env.d.ts'],
+        languageOptions: {
+            parserOptions: {
+                project: path.resolve(projectRoot, 'tsconfig.app.web.json'),
+                projectService: false,
+            },
+        },
+    },
+
     {
         files: ['scripts/**/*.ts', 'tests/tooling/**/*.ts', 'server/{libs,plugins,stubs}/**/*.{ts,tsx}', 'evals/**/*.ts'],
         languageOptions: {

evals/README.md

@@ -26,8 +26,7 @@ Two things about the wiring are load-bearing and easy to break:
   explicit paths too, so running the evals on purpose means overriding it with a pattern that matches
   nothing.
 
-`evals/` has its own `tsconfig.json` rather than joining the root project, because `@types/bun`'s
-globals conflict with the app's. It isn't in the set of projects `npm run typecheck` gates on, so typecheck it with `npm run typecheck -- evals`.
+`evals/` is type-checked as part of the Bun project (`tsconfig.bun.json`) and is included in `npm run typecheck`.
 
 ## ProposalPolice
 

jest/setup.ts

@@ -21,8 +21,8 @@ import setupMockImages from './setupMockImages';
 
 // Needed for tests to have the necessary environment variables set
 if (!('GITHUB_REPOSITORY' in process.env)) {
-    (process.env as NodeJS.ProcessEnv).GITHUB_REPOSITORY_OWNER = 'Expensify';
-    (process.env as NodeJS.ProcessEnv).GITHUB_REPOSITORY = 'Expensify/App';
+    process.env.GITHUB_REPOSITORY_OWNER = 'Expensify';
+    process.env.GITHUB_REPOSITORY = 'Expensify/App';
 }
 
 setupMockImages();

scripts/typecheck.ts

@@ -19,7 +19,14 @@ const projectRoot = `${import.meta.dir}/..`;
 const tsc = `${projectRoot}/node_modules/typescript/bin/tsc`;
 
 /** TypeScript projects, relative to the repo root, that `npm run typecheck` and CI check. */
-const DEFAULT_PROJECTS = ['tsconfig.json', 'tsconfig.jest.json', 'tsconfig.bun.json', 'tsconfig.node.json', 'server/victory-chart-renderer/tsconfig.json'];
+const DEFAULT_PROJECTS = [
+    'tsconfig.app.web.json',
+    'tsconfig.app.native.json',
+    'tsconfig.jest.json',
+    'tsconfig.bun.json',
+    'tsconfig.node.json',
+    'server/victory-chart-renderer/tsconfig.json',
+];
 
 const cli = new CLI({
     positionalArgs: [

server/victory-chart-renderer/tsconfig.json

@@ -3,5 +3,6 @@
     "compilerOptions": {
         "types": ["react-native", "react-native-web", "node"]
     },
-    "include": ["src", "tests", "scripts", "../../src/types"]
+    "include": ["src", "tests", "scripts", "../../src/types/**/*.d.ts"],
+    "exclude": ["**/node_modules/*", "**/dist/*", "../../src/types/native/**"]
 }

src/CONFIG.ts

@@ -109,7 +109,7 @@ export default {
     },
     CAPTURE_METRICS: get(Config, 'CAPTURE_METRICS', 'false') === 'true',
     ONYX_METRICS: get(Config, 'ONYX_METRICS', 'false') === 'true',
-    DEV_PORT: process.env.PORT ?? 8082,
+    DEV_PORT: Number(process.env.PORT) || 8082,
     SEND_CRASH_REPORTS: get(Config, 'SEND_CRASH_REPORTS', 'false') === 'true',
     IS_USING_WEB_PROXY: getPlatform() === 'web' && useWebProxy,
     APPLE_SIGN_IN: {

src/components/AttachmentPicker/index.native.tsx

@@ -200,7 +200,7 @@ function AttachmentPicker({
      * @param {function} imagePickerFunc - RNImagePicker.launchCamera or RNImagePicker.launchImageLibrary
      */
     const showImagePicker = useCallback(
-        (imagePickerFunc: (options: CameraOptions, callback: Callback) => Promise<ImagePickerResponse>): Promise<Asset[] | void> =>
+        (imagePickerFunc: (options: CameraOptions, callback: Callback) => void | Promise<ImagePickerResponse>): Promise<Asset[] | void> =>
             new Promise((resolve, reject) => {
                 imagePickerFunc(getImagePickerOptions(type, fileLimit), (response: ImagePickerResponse) => {
                     if (response.didCancel) {

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx

@@ -55,4 +55,3 @@ function AutoCompleteSuggestionsPortal<TSuggestion>({
 }
 
 export default AutoCompleteSuggestionsPortal;
-export type {AutoCompleteSuggestionsPortalProps};

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

@@ -14,7 +14,7 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {FlatList} from 'react-native-gesture-handler';
 import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 
-import type {AutoCompleteSuggestionsPortalProps} from './AutoCompleteSuggestionsPortal';
+import type {AutoCompleteSuggestionsPortalProps} from './AutoCompleteSuggestionsPortal/types';
 import type {RenderSuggestionMenuItemProps} from './types';
 
 type ExternalProps<TSuggestion> = Omit<AutoCompleteSuggestionsPortalProps<TSuggestion>, 'left' | 'bottom'>;
@@ -37,7 +37,7 @@ function BaseAutoCompleteSuggestionsImpl({
     const rowHeight = useSharedValue(0);
     const prevRowHeightRef = useRef<number>(measuredHeightOfSuggestionRows);
     const fadeInOpacity = useSharedValue(0);
-    const scrollRef = useRef<FlatList<unknown>>(null);
+    const scrollRef = useRef(null);
     /**
      * Render a suggestion menu item component.
      */
@@ -94,7 +94,7 @@ function BaseAutoCompleteSuggestionsImpl({
         }
         // When using cursor control (moving the cursor with the space bar on the keyboard) on Android, moving the cursor too fast may cause an error.
         try {
-            scrollRef.current.scrollToIndex({index: highlightedSuggestionIndex, animated: true});
+            (scrollRef.current as {scrollToIndex?: (params: {index: number; animated?: boolean}) => void} | null)?.scrollToIndex?.({index: highlightedSuggestionIndex, animated: true});
         } catch (e) {}
     }, [highlightedSuggestionIndex]);
 

src/components/DragAndDrop/Consumer/index.native.tsx

@@ -1,3 +1,8 @@
+import type {ReactNode} from 'react';
+
+import type DragAndDropConsumerProps from './types';
+
+function DragAndDropConsumer(props: DragAndDropConsumerProps): ReactNode;
 function DragAndDropConsumer() {
     return null;
 }

src/components/FeatureTraining/primitives/Illustration.tsx

@@ -24,6 +24,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import type {ImageContentFit} from 'expo-image';
 import type {SourceLoadEventPayload} from 'expo-video';
 import type LottieView from 'lottie-react-native';
+import type {ComponentRef} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {MergeExclusive} from 'type-fest';
 
@@ -94,7 +95,7 @@ function Illustration({
     const [measuredAspectRatio, setMeasuredAspectRatio] = useState(aspectRatioProp ?? VIDEO_ASPECT_RATIO);
     const isInLandscapeMode = isInLandscapeModeUtil(windowWidth, windowHeight);
 
-    const animationRef = useRef<LottieView | null>(null);
+    const animationRef = useRef<ComponentRef<typeof LottieView> | null>(null);
     useEffect(() => {
         if (isMobile() || !animationRef.current || isReduceMotionEnabled) {
             return;

src/components/FormElement/index.native.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 
-import type {FormElementProps} from './index';
+import type FormElementProps from './types';
 
 function FormElement({ref, ...props}: FormElementProps) {
     return (

src/components/FormElement/index.tsx

@@ -1,15 +1,10 @@
 import {ACCESSIBILITY_ROLE_FORM} from '@libs/ComponentUtils/index';
 import mergeRefs from '@libs/mergeRefs';
 
-import type {ForwardedRef} from 'react';
-import type {ViewProps} from 'react-native';
-
 import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 
-type FormElementProps = ViewProps & {
-    ref?: ForwardedRef<View>;
-};
+import type FormElementProps from './types';
 
 const preventFormDefault = (event: SubmitEvent) => {
     // When Enter is pressed, the form is submitted to the action URL (POST /).
@@ -51,5 +46,3 @@ function FormElement({ref, ...props}: FormElementProps) {
 }
 
 export default FormElement;
-
-export type {FormElementProps};

src/components/FormElement/types.ts

@@ -0,0 +1,8 @@
+import type {ForwardedRef} from 'react';
+import type {View, ViewProps} from 'react-native';
+
+type FormElementProps = ViewProps & {
+    ref?: ForwardedRef<View>;
+};
+
+export default FormElementProps;

src/components/HeaderWithBackButton/types.ts

@@ -1,7 +1,7 @@
 import type {ExpensifyIconName} from '@components/Icon/ExpensifyIconLoader';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 
-import type {Action} from '@hooks/useSingleExecution';
+import type Action from '@hooks/useSingleExecution/types';
 
 import type CONST from '@src/CONST';
 import type {StepCounterParams} from '@src/languages/params';

src/components/Icon/PlaceholderIcon.tsx

@@ -14,7 +14,7 @@ function PlaceholderIcon({width = 24, height = 24, fill, style, testID}: SvgProp
             height={height}
             viewBox="0 0 24 24"
             fill={fill}
-            style={style}
+            style={style ? [style] : undefined}
             testID={testID}
         >
             {/* Completely empty - no visible content, just maintains dimensions */}

src/components/Lottie/index.tsx

@@ -13,21 +13,21 @@ import CONST from '@src/CONST';
 import {useSplashScreenState} from '@src/SplashScreenStateContext';
 
 import type {AnimationObject, LottieViewProps} from 'lottie-react-native';
-import type {ForwardedRef} from 'react';
+import type {ComponentRef, ForwardedRef} from 'react';
 
 import {NavigationContainerRefContext, NavigationContext} from '@react-navigation/native';
 import LottieView from 'lottie-react-native';
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 
 type Props = {
-    ref?: ForwardedRef<LottieView | null>;
+    ref?: ForwardedRef<ComponentRef<typeof LottieView> | null>;
     source: DotLottieAnimation;
     shouldLoadAfterInteractions?: boolean;
 } & Omit<LottieViewProps, 'source'>;
 
 function Lottie({ref, source, webStyle, shouldLoadAfterInteractions, ...props}: Props) {
-    const animationRef = useRef<LottieView | null>(null);
+    const animationRef = useRef<ComponentRef<typeof LottieView> | null>(null);
     const appState = useAppState();
     const {splashScreenState} = useSplashScreenState();
     const styles = useThemeStyles();

src/components/MapView/Icons/MapMarkerShadowFilter.tsx

@@ -7,9 +7,11 @@ type MapMarkerShadowFilterProps = {
     height: string;
 };
 
+const SvgDefs = Defs as React.ComponentType<{children?: React.ReactNode}>;
+
 function MapMarkerShadowFilter({id, width, height}: MapMarkerShadowFilterProps) {
     return (
-        <Defs>
+        <SvgDefs>
             <Filter
                 id={id}
                 x="0"
@@ -26,7 +28,7 @@ function MapMarkerShadowFilter({id, width, height}: MapMarkerShadowFilterProps)
                     floodOpacity={0.06}
                 />
             </Filter>
-        </Defs>
+        </SvgDefs>
     );
 }
 

src/components/MenuItemGroup.tsx

@@ -1,5 +1,5 @@
 import useSingleExecution from '@hooks/useSingleExecution';
-import type {Action} from '@hooks/useSingleExecution';
+import type Action from '@hooks/useSingleExecution/types';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 
 import React, {createContext, useContext} from 'react';

src/components/Modal/ReanimatedModal/types.ts

@@ -23,7 +23,7 @@ type GestureHandlerProps = {
     onSwipeComplete?: () => void;
 
     /** Threshold for swipe gesture. */
-    swipeThreshold: number;
+    swipeThreshold?: number;
 
     /** Threshold for swipe gesture. */
     swipeDirection?: SwipeDirection | SwipeDirection[];

src/components/Modal/useSyncModalWithHistory/index.native.ts

@@ -1,2 +1,6 @@
+import type UseSyncModalWithHistory from './types';
+
 // Modal back-guard synchronization with the browser history is only supported for web.
-export default function useSyncModalWithHistory() {}
+const useSyncModalWithHistory: UseSyncModalWithHistory = () => {};
+
+export default useSyncModalWithHistory;

src/components/Modal/useSyncModalWithHistory/index.ts

@@ -7,24 +7,11 @@ import CONST from '@src/CONST';
 import {useEffect, useEffectEvent, useId, useRef, useSyncExternalStore} from 'react';
 
 import type {ModalGuardState} from './modalGuardState';
+import type {UseSyncModalWithHistoryParams} from './types';
 
 import {EMPTY_MODAL_GUARD_SNAPSHOT_KEY, getModalGuardSnapshotKey, parseModalGuardSnapshotKey} from './modalGuardSnapshot';
 import reduceModalGuardState, {getModalGuardEventFromSnapshotChange, MODAL_GUARD_EFFECT, MODAL_GUARD_STATE} from './modalGuardState';
 
-type UseSyncModalWithHistoryParams = {
-    /** Whether the modal is currently visible */
-    isVisible: boolean;
-
-    /** Whether this modal participates in browser-history back handling */
-    shouldHandleNavigationBack?: boolean;
-
-    /** Called when a browser Back press removes this modal's history entry */
-    onClose?: () => void;
-
-    /** Called when browser Forward navigation restores this modal's history entry while the modal is closed */
-    onOpen?: () => void;
-};
-
 /**
  * Web: represents a `shouldHandleNavigationBack` modal's back-guard as a uniquely-tagged history entry in the
  * root navigator's `state.history` (dispatched via `TOGGLE_MODAL_WITH_HISTORY`). React Navigation's

src/components/Modal/useSyncModalWithHistory/types.ts

@@ -0,0 +1,18 @@
+type UseSyncModalWithHistoryParams = {
+    /** Whether the modal is currently visible */
+    isVisible: boolean;
+
+    /** Whether this modal participates in browser-history back handling */
+    shouldHandleNavigationBack?: boolean;
+
+    /** Called when a browser Back press removes this modal's history entry */
+    onClose?: () => void;
+
+    /** Called when browser Forward navigation restores this modal's history entry while the modal is closed */
+    onOpen?: () => void;
+};
+
+type UseSyncModalWithHistory = (params: UseSyncModalWithHistoryParams) => void;
+
+export default UseSyncModalWithHistory;
+export type {UseSyncModalWithHistoryParams};

src/components/PDFView/index.native.tsx

@@ -184,7 +184,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused
                         onError={handleFailureToLoadPDF}
                         password={password}
                         onLoadComplete={finishPDFLoad}
-                        onPageSingleTap={onPress}
+                        onPageSingleTap={() => onPress?.()}
                         onScaleChanged={onScaleChanged}
                         onPressLink={handlePressLink}
                     />

src/components/PDFView/types.ts

@@ -39,8 +39,6 @@ type PDFViewProps = {
     rotation?: RotationDegrees;
 };
 
-type PDFViewNativeProps = PDFViewProps & {
-    onPress?: (page: number, x: number, y: number) => void;
-};
+type PDFViewNativeProps = PDFViewProps;
 
 export type {PDFViewNativeProps, PDFViewProps};

src/components/PopoverProvider/index.native.tsx

@@ -9,9 +9,9 @@ type PopoverStateContextType = {
 };
 
 type PopoverActionsContextType = {
-    onOpen: () => void;
-    close: () => void;
-    setActivePopoverExtraAnchorRef: () => void;
+    onOpen: (popoverParams?: unknown) => void;
+    close: (anchorRef?: unknown) => void;
+    setActivePopoverExtraAnchorRef: (ref?: unknown) => void;
 };
 
 const defaultPopoverActionsContext: PopoverActionsContextType = {

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -118,7 +118,7 @@ function ReportActionItemImages({images, size, total, isHovered = false, onPress
                     <Svg
                         height={triangleWidth}
                         width={triangleWidth}
-                        style={styles.reportActionItemImagesMoreCornerTriangle}
+                        style={[styles.reportActionItemImagesMoreCornerTriangle]}
                     >
                         <Polygon
                             points={`${triangleWidth},0 ${triangleWidth},${triangleWidth} 0,${triangleWidth}`}

src/components/ReportActionItem/receiptHoverUtils/index.native.ts

@@ -1,8 +1,8 @@
+import type {IsElementHovered, ResetButtonHoverState} from './types';
+
 // No-op on native — hover states don't exist on mobile
-function resetButtonHoverState() {}
+const resetButtonHoverState: ResetButtonHoverState = () => {};
 
-function isElementHovered(): boolean {
-    return false;
-}
+const isElementHovered: IsElementHovered = () => false;
 
 export {resetButtonHoverState, isElementHovered};