Dynamic type for function parameters with extraction of predefined types

Question

I'm wondering if it's possible to create dynamic type that would replace two params, such as in on: (eventName: EventName, callback: (data: any) => void) => void with something closer to this on: (DynamicParams<EventName>) => void, so it could extract callback's type from a predefined set and use it instead of any type.

I think it would be easier to explain with some code.

Say, I have set of different types of events:

const events = ['loaded', 'changed'];

type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number];

type EventName = ArrayElement<typeof events>

and a function that runs only when a specific notification has been emitted;

const on = (eventName: EventName, callback: (data: any) => void) => {}

But I want to be able to use this function with callback that accepts different parameter types, without checking for the type manually and without any casting, for example:

on('loaded', (list: Entry[]) => {
  // do something with loaded array of elements;
}

on('changed', (index: number) => {
  // do something with index of a changed entry;
}

Is there a way to create a mapped type that would accept EventName and return a specific type to a given event?

Something like that:

const on(eventName: EventName, DynamicMethod<'eventName'> => void) => {}

const on(DynamicParams<'eventName'>) => {}

Assume, I would need to replace event object and create a type in its place, instead:

type events = [
  {
    name: 'loaded',
    method: (list: Entry[]) => void

  },
  {
    name: 'changed',
    method: (index: number) => void
  }
]

But I'm not sure how to extract name values (not types of the values).

So this? You may face some type issues when implementing the function (the body) with these kinds of things, though. — k.tten
– k.tten, Commented Nov 2, 2022 at 20:07

k.tten · Accepted Answer · 2022-11-02 20:36:33Z

1

If you define a map of event names to their data type:

type EventMap = {
    loaded: Entry[];
    changed: number;
};

You can make on generic:

const on = <E extends EventName>(eventName: E, callback: (data: EventMap[E]) => void) => {}

on('loaded', (list) => {
//            ^? Entry[]
});

on('changed', (index) => {
//             ^? number
});

Playground

answered Nov 2, 2022 at 20:36

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smac89 · Accepted Answer · 2022-11-02 20:10:13Z

1

There are two ways to make this work:

Using call signatures:

interface OnEvent {
  (eventName: 'loaded', callback: (list: Entry[]) => void): void;
  (eventName: 'changed', callback: (index: number) => void): void;
}

const on: OnEvent = (eventName, callback) => {
    // Choose how to register the event here...
}

Or function overloads:

function on(eventName: 'loaded', callback: (list: Entry[]) => void): void;
function on(eventName: 'changed', callback: (index: number) => void): void;
function on(eventName: string, callback: (data: any) => void) {
    // Choose how to register the event here...
}

answered Nov 2, 2022 at 20:10

smac89

43.8k15 gold badges150 silver badges204 bronze badges

Collectives™ on Stack Overflow

Dynamic type for function parameters with extraction of predefined types

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related