Organizing navigation types for react-native

navigationTypesExample.ts

type CreateNavigationParams<
  ScreenEnum extends string,
  ExtensionType extends Partial<Record<ScreenEnum, unknown>>,
> = {
  [K in ScreenEnum | keyof ExtensionType]: K extends keyof ExtensionType
    ? ExtensionType[K]
    : undefined;
};

// Usage:
    
 enum PORTFOLIO_TABS_STACK {
  BALANCES = 'BalancesTab',
  LOGS = 'LogsTab',
  ORDERS_CONDITIONAL = 'ConditionalOrdersTab',
  ORDERS_LIMIT = 'LimitOrdersTab',
  POSITIONS = 'PositionsTab',
}
    
 type TabNavigationParamsList = CreateNavigationParams<
  MAIN_TABS_STACK,
  {
    [MAIN_TABS_STACK.TRADES]:
      | {
          contractCurrency?: string;
          contractType?: `${ContractType}`;
          productId?: number;
          symbol?: string;
        }
      | undefined;
    [MAIN_TABS_STACK.OPTIONS_TRADES]: {
      productId?: number;
      symbol?: string;
    };
  }
>;
 
 type PortfolioTabNavigationParamsList = CreateNavigationParams<PORTFOLIO_TABS_STACK, object>;
    
  // using this way, we can avoid declaring undefined like below:
  /**
    type PortfolioTabNavigationParamsList = {
      [PORTFOLIO_TABS_STACK.BALANCES]: undefined;
      [PORTFOLIO_TABS_STACK.POSITIONS]: undefined;
      [PORTFOLIO_TABS_STACK.ORDERS_LIMIT]: undefined;
      [PORTFOLIO_TABS_STACK.ORDERS_CONDITIONAL]: undefined;
      [PORTFOLIO_TABS_STACK.LOGS]: undefined;
    };
  */