Indexing a combination of records, where the key of one is a subset of the other with different values – Javascript

I have an enum of keys for a configuration object, that renders a Material-UI Drawer Component, where the component in the drawer either matches one single component or a group of components in sections per sub-topic:

export enum InsuranceTopicPrimaryKeys {
  POLICY_HOLDERS = "policyHolders",
  INSURANCE_PROVIDERS = "providers",
  INSURANCE_TYPE = "type",
  CLAIMS = "claims",
}

export enum InsuranceTopicSecondaryKeys {
  POLICY_MEMBERS = "policyMembers",
}

export type InsuranceTopicKeys =
  | InsuranceTopicPrimaryKeys
  | InsuranceTopicSecondaryKeys;

export enum SectionKeys {
  CLAIMANTS = "claimants",
  FULFILLED_CLAIMS = "fullfilledClaims",
  UNFULFILLED_CLAIMS = "unfullfilledClaims",
}

and the configuration object looks like this:

export const TOPICS: Record<
  InsuranceTopicPrimaryKeys,
  TopicConfiguration | TopicConfigurationGrouped
> = {
  [InsuranceTopicPrimaryKeys.POLICY_HOLDERS]: {
    key: InsuranceTopicPrimaryKeys.POLICY_HOLDERS,
    secondaryKey: InsuranceTopicSecondaryKeys.POLICY_MEMBERS,
    title: "Policy Holders",
    component: (props: TopicDrawerProps) => (
      <TopicDrawer hasSecondary={true} {...props} />
    ),
    topicSelector: keyedTopicSelector.showAll,
    secondaryTopic: {
      key: InsuranceTopicSecondaryKeys.POLICY_MEMBERS,
      primaryKey: InsuranceTopicPrimaryKeys.POLICY_HOLDERS,
      title: "Policy Members",
      component: (props: TopicDrawerProps) => (
        <TopicDrawer isSecondary={true} {...props} />
      ),
      topicSelector: keyedTopicSelector.showRelated,
    },
  },
  [InsuranceTopicPrimaryKeys.INSURANCE_PROVIDERS]: {
    key: InsuranceTopicPrimaryKeys.INSURANCE_PROVIDERS,
    title: "Policy Holders",
    component: TopicDrawerSimple,
    topicSelector: keyedTopicSelector.showAll,
  },
  [InsuranceTopicPrimaryKeys.INSURANCE_TYPE]: {
    key: InsuranceTopicPrimaryKeys.INSURANCE_PROVIDERS,
    title: "Policy Holders",
    component: TopicDrawerSimple,
    topicSelector: keyedTopicSelector.showAll,
  },
  [InsuranceTopicPrimaryKeys.CLAIMS]: {
    key: InsuranceTopicPrimaryKeys.CLAIMS,
    title: "Claims",
    component: TopicDrawerGroup,
    topicSelectorCreator: createMultiKeyedTopicSelector,
    sections: [
      SectionKeys.CLAIMANTS,
      SectionKeys.FULFILLED_CLAIMS,
      SectionKeys.UNFULFILLED_CLAIMS,
    ],
  },
};

export type SectionConfig = {
  key: SectionKeys;
  title: string;
};

export const SECTIONS: Record<SectionKeys, SectionConfig> = {
  [SectionKeys.CLAIMANTS]: {
    key: SectionKeys.CLAIMANTS,
    title: "Claimants",
  },
  [SectionKeys.FULFILLED_CLAIMS]: {
    key: SectionKeys.FULFILLED_CLAIMS,
    title: "Fulfilled Claims",
  },
  [SectionKeys.UNFULFILLED_CLAIMS]: {
    key: SectionKeys.UNFULFILLED_CLAIMS,
    title: "Unfulfilled Claims",
  },
};

The configurations (TopicConfiguration, SecondaryTopicConfiguration and TopicConfigurationGrouped) share a base type, that they extend:

export interface BaseTopicConfig {
  key: InsuranceTopicKeys;
  title: string;
  secondaryKey?: InsuranceTopicSecondaryKeys;
  secondaryTopic?: SecondaryTopicConfiguration;
}

export interface TopicConfiguration extends BaseTopicConfig {
  topicSelector: TopicSelector;
  component: TopicComponent;
}
export interface SecondaryTopicConfiguration extends TopicConfiguration {
  primaryKey: InsuranceTopicPrimaryKeys;
}
export interface TopicConfigurationGrouped extends BaseTopicConfig {
  topicSelectorCreator: TopicSelectorCreator;
  component: TopicComponentGroup;
  sections: SectionKeys[];
}

However there’re times when I’d like to look up the config of InsuranceTopicPrimaryKeys.CLAIMS, and shortcut having to ‘prove’ to TS that it’s config is only ever going to be of the type TopicConfigurationGrouped. For legacy reasons I can’t split the config up, as well are situations where I want to access the shared keys.

So I was hoping I could create a subset of ‘keys’, and have the union of two records (see below), not a record with it’s values being a union of types (Record<InsuranceTopicPrimaryKeys, TopicConfiguration | TopicConfigurationGrouped>.

// subset that match config of type TopicConfigurationGrouped 
export type TopicGroups = InsuranceTopicPrimaryKeys.CLAIMS

And then make the type of TOPICS:

const TOPICS: Record<InsuranceTopicPrimaryKeys, TopicConfiguration> | Record<TopicGroups, TopicConfigurationGrouped>

But now when I go to get my config with this helper function:

const isPrimaryTopic = (
  topicType: string
): topicType is InsuranceTopicPrimaryKeys =>
  Object.values(InsuranceTopicPrimaryKeys).includes(
    topicType as InsuranceTopicPrimaryKeys
  );

const getConfig = (
  configKey: string
):
  | SecondaryTopicConfiguration
  | TopicConfiguration
  | TopicConfigurationGrouped
  | undefined =>
  isPrimaryTopic(configKey)
    ? TOPICS[configKey as InsuranceTopicPrimaryKeys]
    : Object.values(TOPICS).find(
        (topicConfig) => topicConfig?.secondaryKey === configKey
      )?.secondaryTopic;

I get this error:

Element implicitly has an ‘any’ type because expression of type ‘InsuranceTopicPrimaryKeys’ can’t be used to index type ‘Record<InsuranceTopicPrimaryKeys, TopicConfiguration> | Record<InsuranceTopicPrimaryKeys.CLAIMS, TopicConfigurationGrouped>’.
Property ‘[InsuranceTopicPrimaryKeys.POLICY_HOLDERS]’ does not exist on type ‘Record<InsuranceTopicPrimaryKeys, TopicConfiguration> | Record<InsuranceTopicPrimaryKeys.CLAIMS, TopicConfigurationGrouped>’.(7053)

How can I configure the type in my configuration mapping object (TOPICS, and/or in the linked playground TOPICS_TWO) so that this helper function (and others) can infer that the InsuranceTopicPrimaryKeys type can index the union of the different Records?

Additional type to make this a working example are in this typescript playground