If you have a pre-defined Mapping structure, you can easily work with it.
Start by utilizing mapped types to generate all possible data structures:
interface Mapping {
"x": (a: string) => void
"y": (b: number) => void
}
type Variants<Dictionary> = {
[Prop in keyof Dictionary]: {
name: Prop,
fn: Dictionary[Prop]
}
}
// type Result = {
// x: {
// name: "x";
// fn: (a: string) => void;
// };
// y: {
// name: "y";
// fn: (b: number) => void;
// };
// }
type Result = Variants<Mapping>
By creating a nested object with allowed state representations, we then need to consolidate these values into a union or a discriminated union type. Consider the following approach:
type Values<T> = T[keyof T]
interface Mapping {
"x": (a: string) => void
"y": (b: number) => void
}
type Variants<Dictionary> = {
[Prop in keyof Dictionary]: {
name: Prop,
fn: Dictionary[Prop]
}
}
// type Result = {
// name: "x";
// fn: (a: string) => void;
// } | {
// name: "y";
// fn: (b: number) => void;
// }
type Result = Values<Variants<Mapping>>
The use of the Values utility type aggregates all values without their corresponding keys into a union, which aligns with our goal.
We can simplify and improve it further:
type Values<T> = T[keyof T]
interface Mapping {
"x": (a: string) => void
"y": (b: number) => void
}
type Variants<Dictionary> = Values<{
[Prop in keyof Dictionary]: {
name: Prop,
fn: Dictionary[Prop]
}
}>
type Handlers = Variants<Mapping>
const x: Handlers = {
name: "x",
fn(prop /* :string */) { }
}
const y: Handlers = {
name: "y",
fn(prop /* :number */) { }
}
Interactive Playground
No additional generic arguments are needed for this implementation.
You can also check out a similar question on Stack Overflow here, and my related article here.