🎯 Objective
Consolidate all TypeScript type definitions from scattered locations into a centralized /app/types directory structure to improve maintainability, eliminate circular dependencies, and establish a single source of truth for type definitions.
📋 Current State
Types are currently scattered across multiple locations:
context/types.ts - App state and action types
configs/constants.ts - Configuration types (CurrencyType, DuplicatePreventionTimeOption)
- Various hook files - Hook-specific types
- Component files - Component-specific types
/app/types directory exists but is empty
Circular Dependency Issue
context/types.ts imports CurrencyType from @configs
configs/constants.ts imports types from @/context/types
- This creates a problematic circular dependency
🏗️ Proposed Structure
app/types/
├── index.ts # Export all types (single entry point)
├── app.types.ts # AppState, Actions, etc.
├── config.types.ts # CurrencyType, DuplicatePreventionTimeOption, SliderConfigs
└── tip.types.ts # TipOptionState, SplitOptionState, SavedTip
✅ Implementation Steps
1. Create Type Definition Files
config.types.ts
Move from configs/constants.ts and context/types.ts:
CurrencyType
DuplicatePreventionTimeOption
TipSliderConfigValues
SplitSliderConfigValues
tip.types.ts
Move from context/types.ts:
TipOptionState
SplitOptionState
SavedTip
Optional: Consider adding hook-related types:
BillCalculationResult
RoundingDirection
RoundingMethod
RoundingMethodAvailability
app.types.ts
Move from context/types.ts:
AppState
TipAction
SplitAction
CurrencyConfigAction
SavedTipAction
DuplicatePreventionAction
AppAction
index.ts
Re-export all types from the three category files.
2. Update tsconfig.json
Add path alias for the new types directory:
"@types": ["app/types/index"]
3. Update Import Statements
Update all files (17+ files) that currently import from @/context/types or type imports from @configs:
Context files:
context/AppContext.tsx
context/reducers.ts
context/rootReducer.ts
Hook files:
hooks/useSaveTip.ts
hooks/asyncStorageHooks.ts
hooks/asyncStorageUtil.ts
hooks/usePersistedReducer.ts
Component files:
components/StyledSplitOptions/index.tsx
components/StyledSplitOptionsEditMode/index.tsx
components/StyledTipOptions/index.tsx
components/StyledTipOptionsEditMode/index.tsx
components/StyledCurrencySelector/index.tsx
components/StyledDuplicatePreventionSelector/index.tsx
Screen files:
screens/TipScreens/SavedTipsListScreen.tsx
screens/TipScreens/SavedTipDetailScreen.tsx
screens/TipScreens/TipMainScreen.tsx
Config files:
configs/constants.ts (remove type definitions, import from @types)
4. Clean Up
- Delete
context/types.ts after migration is complete
5. Verification
- Run TypeScript compilation:
tsc --noEmit
- Verify the app builds successfully
- Test core functionality (tip calculations, settings, saved tips)
🔮 Future Considerations
-
Hook-specific types: Should types like ThemeCustomisationState, ExternalLinkAlertConfig, and ShareTipDetailsParams be moved to /app/types/hook.types.ts, or remain co-located with their implementations?
-
Component types: Should component-specific types (e.g., AlertType, IconProps) be moved to /app/types/component.types.ts?
-
Navigation types: Consider creating navigation.types.ts to centralize route parameters (like SavedTipDetailScreenParams) for type-safe navigation.
✨ Benefits
- ✅ Single source of truth for all type definitions
- ✅ Eliminates circular dependencies
- ✅ Easier to find and update types
- ✅ Better code organization and maintainability
- ✅ Clearer separation between types and implementation
- ✅ Prevents future circular dependency issues
📝 Notes
- This is a refactoring task with no functional changes
- All type definitions remain the same, only their location changes
- Existing functionality should remain unchanged
- Consider this a foundation for better type organization going forward
🎯 Objective
Consolidate all TypeScript type definitions from scattered locations into a centralized
/app/typesdirectory structure to improve maintainability, eliminate circular dependencies, and establish a single source of truth for type definitions.📋 Current State
Types are currently scattered across multiple locations:
context/types.ts- App state and action typesconfigs/constants.ts- Configuration types (CurrencyType, DuplicatePreventionTimeOption)/app/typesdirectory exists but is emptyCircular Dependency Issue
context/types.tsimportsCurrencyTypefrom@configsconfigs/constants.tsimports types from@/context/types🏗️ Proposed Structure
✅ Implementation Steps
1. Create Type Definition Files
config.types.ts
Move from
configs/constants.tsandcontext/types.ts:CurrencyTypeDuplicatePreventionTimeOptionTipSliderConfigValuesSplitSliderConfigValuestip.types.ts
Move from
context/types.ts:TipOptionStateSplitOptionStateSavedTipOptional: Consider adding hook-related types:
BillCalculationResultRoundingDirectionRoundingMethodRoundingMethodAvailabilityapp.types.ts
Move from
context/types.ts:AppStateTipActionSplitActionCurrencyConfigActionSavedTipActionDuplicatePreventionActionAppActionindex.ts
Re-export all types from the three category files.
2. Update tsconfig.json
Add path alias for the new types directory:
3. Update Import Statements
Update all files (17+ files) that currently import from
@/context/typesor type imports from@configs:Context files:
context/AppContext.tsxcontext/reducers.tscontext/rootReducer.tsHook files:
hooks/useSaveTip.tshooks/asyncStorageHooks.tshooks/asyncStorageUtil.tshooks/usePersistedReducer.tsComponent files:
components/StyledSplitOptions/index.tsxcomponents/StyledSplitOptionsEditMode/index.tsxcomponents/StyledTipOptions/index.tsxcomponents/StyledTipOptionsEditMode/index.tsxcomponents/StyledCurrencySelector/index.tsxcomponents/StyledDuplicatePreventionSelector/index.tsxScreen files:
screens/TipScreens/SavedTipsListScreen.tsxscreens/TipScreens/SavedTipDetailScreen.tsxscreens/TipScreens/TipMainScreen.tsxConfig files:
configs/constants.ts(remove type definitions, import from@types)4. Clean Up
context/types.tsafter migration is complete5. Verification
tsc --noEmit🔮 Future Considerations
Hook-specific types: Should types like
ThemeCustomisationState,ExternalLinkAlertConfig, andShareTipDetailsParamsbe moved to/app/types/hook.types.ts, or remain co-located with their implementations?Component types: Should component-specific types (e.g.,
AlertType,IconProps) be moved to/app/types/component.types.ts?Navigation types: Consider creating
navigation.types.tsto centralize route parameters (likeSavedTipDetailScreenParams) for type-safe navigation.✨ Benefits
📝 Notes