Typescript optional generic to infer the returned object type and preserve autocompletion

I've been using TypeScript for a while and have always struggled with this. I'm trying to build an Event system for our app and I want to enforce typesafety when creating objects, which are used for grouping events that relate to a specific context together.

Summary

Before I explain in detail what I want, let me give you the final result that I'm trying to achieve:

type DashboardGroups = "home" | "settings" | "profile";
// events should only have one of these groups when added to the `DashboardEventsMap` 
type DashboardEvent = IMetricsEvent<DashboardGroups>;

// enforce that events match the following shape here: `{ [event:string]: DashboardEvent }`
const DashboardEventsMap = createEventMapping<DashboardEvent>({
  validEvent: {
    name: "valid event",
    group: "home" // ✅ this should work
  },
  invalidEvent: {
    name: "invalid event",
    group: "invalid group", // ❌ This should give a type error
  }
})

// BUT MOST IMPORTANTLY
// I want to preserve the shape and intellisense when trying to use the map object
DashboardEventsMap.validEvent // ✅ This should both work and show in autocomplete
DashboardEventsMap.eventWhichDoesntExist // ❌ This should give a type error

Details

Events have the following structure and must be able to take a custom group to enforce that events belong to certain groups in different parts of the app.

export interface IMetricsEvent<
  TGroup extends string = string,
> {
  name: string;
  group?: TGroup;
}

Right now I'm running into a couple of issues with my createEventMapping function:

type MetricsEventMapType<TEvent extends IMetricsEvent> = {
  [event: string]: TEvent;
};

export const createMetricsEventMapping = <
  TMetricsEvent extends IMetricsEvent,
  T extends MetricsEventMapType<TMetricsEvent> = MetricsEventMapType<TMetricsEvent>,
>(
  arg: T,
) => arg;

1. No type

const map = createMetricsEventMapping({event: {name:"event", group:"any group"});

map.event // ✅ autocompletion works but there is no typechecking on the groups

2. Passing in event type

but if I pass in an event type, I get the typechecking on the groups but there is no autocompletion:

type DashboardEvent = IMetricsEvent<"home">;
const map = createMetricsEventMapping<DashboardEvent>({event: {name:"event", group:"any group"});

map.event // ❌ typechecking works on the groups above ☝️ but there's no autocompletion anymore

3. Removing the culprit = MetricsEventMapType<TMetricsEvent>

I know the reason why this is happening is that when no types are passed, typescript correctly infers everything. However when the first type argument TMetricsEvent is passed, typescript now expects T to also be passed and since it's optional, it simply defaults to MetricsEventMapType<TMetricsEvent> instead of being inferred.

However, if I remove the default = MetricsEventMapType<TMetricsEvent>, typescript starts yelling at me when I pass in the TMetricsEventType (fine when no type is passed)

export const createMetricsEventMapping = <
  TMetricsEvent extends IMetricsEvent,
  T extends MetricsEventMapType<TMetricsEvent>, // remove default here
>(
  arg: T,
) => arg;

type DashboardEvent = IMetricsEvent<"home">;
// ❌ This now gives a type error saying that expected 2 type arguments but got 1
const map = createMetricsEventMapping<DashboardEvent>({event: {name:"event", group:"any group"});

If this is not possible or are better ways to go about it with better types instead of function inference, nested functions or anything of the sort, please do let me know. Any help is appreciated!

If you are using a new version of TypeScript, the satisfies operator might be a better choice:

// enforce that events match the following shape here: `{ [event:string]: DashboardEvent }`
const DashboardEventsMap = {
  validEvent: {
    name: "valid event",
    group: "home" // ✅ this should work
  },
  invalidEvent: {
    name: "invalid event",
    group: "invalid group", // ✅ error now
  }
} satisfies MetricsEventMapType<DashboardEvent>

// BUT MOST IMPORTANTLY
// I want to preserve the shape and intellisense when trying to use the map object
DashboardEventsMap.validEvent // ✅ This should both work and show in autocomplete
DashboardEventsMap.eventWhichDoesntExist // ✅ error now

Playground Link

You can use a function (if you need better control over inference) but like you already noticed TypeScript function inference is an all or nothing affair. You either let TypeScript infer all type arguments or specify them all (with the unspecified ones taken from defaults)

You have several work arounds for this:

The simplest solution is to use function currying to:

export const createEventMapping = <
  TMetricsEvent extends IMetricsEvent>
  () => <
    T extends Record<keyof T, TMetricsEvent>,
  >(
    arg: T,
  ) => arg;

const DashboardEventsMap = createEventMapping<DashboardEvent>()({
  validEvent: {
    name: "valid event",
    group: "home" // ✅ this should work
  },
  invalidEvent: {
    name: "invalid event",
    group: "invalid group", // ✅ error now
  }
})

Playground Link

You could also create an inference site for TMetricsEvent as a regular argument using some sort of dummy helper function:

const type = <T,>() => null! as T
export const createEventMapping = <
    TMetricsEvent extends IMetricsEvent,
    T extends Record<keyof T, TMetricsEvent>,
  >(
    _type: TMetricsEvent,
    arg: T,
  ) => arg;


// enforce that events match the following shape here: `{ [event:string]: DashboardEvent }`
const DashboardEventsMap = createEventMapping(type<DashboardEvent>(), {
  validEvent: {
    name: "valid event",
    group: "home" // ✅ this should work
  },
  invalidEvent: {
    name: "invalid event",
    group: "invalid group", // ✅ error now
  }
})

Playground Link