Leveraging TypeScript generics for indexing

Question

Leveraging TypeScript generics for indexing

Trying to establish type information for event listeners by using generics on the .on() function.

type Name = "error" | "connected";

type Callback = {
    error: (err: Error) => void,
    connected: (err: number) => void,
};

function on<T extends Name>(eventName: T, callback: Callback[T]): void { }

on("error", (err) => err.stack);
on("connected", (err) => err.stack);

Expected an error for the connected event due to the attempt to use a number as an Error, but received no type hinting for the callback functions.

If all function definitions in Callback match, functionality starts to work. For example:

type Callback = {
    error: (err: Error) => void,
    connected: (err: Error) => void,
};

View the GIF demonstrating the issue in VS Code:

https://i.sstatic.net/nIxu1.gif

Is there an error in my approach?

typescript typescript-generics

Answer 1

Answer №1

It appears that the behavior of the inference engine in the compiler is quite peculiar.

My theory on this: When you specify the second parameter as Callback[T], the engine will attempt to deduce the value of T based on the argument type. Therefore, if you do not explicitly define the type for the arrow function, the inference engine will assume the parameter for the arrow function to be any and then make an educated guess at T based on the arrow function type. (Enabling strict mode will result in an error stating that the parameter implicitly has type any).

There are two potential solutions to this issue:

1. Adopt a two-function approach, where T is established in the initial call and remains known for the subsequent call where the parameter is supplied:

type Callback = {
    error: (e: Error) => void
    connected: (e: string) => void
};
function on<T extends Name>(eventName: T) { 
    return function(callback: Callback[T])
    {
    };
}

on("error")(e=> e.stack);
on("connected")(e=> e.substr(1));

2. If the only variation between functions is the parameter type and you are utilizing version 2.8 or older (not yet released at the time of writing but available in RC, which can be obtained via npm install -g typescript@rc), you can focus solely on the differing argument, thereby preventing the inference engine from utilizing the second parameter to deduce T:

type Arg0<T> =  T extends (p1: infer U) => any ? U: never;
function on<T extends keyof Callback>(eventName: T, callback: (e: Arg0<Callback[T]>) => void) : void { }

on("error", e=> e.stack);
on("connected", e=> e.substr(1));

Answer 2

It appears that the behavior of the inference engine in the compiler is quite peculiar.

My theory on this: When you specify the second parameter as Callback[T], the engine will attempt to deduce the value of T based on the argument type. Therefore, if you do not explicitly define the type for the arrow function, the inference engine will assume the parameter for the arrow function to be any and then make an educated guess at T based on the arrow function type. (Enabling strict mode will result in an error stating that the parameter implicitly has type any).

There are two potential solutions to this issue:

1. Adopt a two-function approach, where T is established in the initial call and remains known for the subsequent call where the parameter is supplied:

type Callback = {
    error: (e: Error) => void
    connected: (e: string) => void
};
function on<T extends Name>(eventName: T) { 
    return function(callback: Callback[T])
    {
    };
}

on("error")(e=> e.stack);
on("connected")(e=> e.substr(1));

2. If the only variation between functions is the parameter type and you are utilizing version 2.8 or older (not yet released at the time of writing but available in RC, which can be obtained via npm install -g typescript@rc), you can focus solely on the differing argument, thereby preventing the inference engine from utilizing the second parameter to deduce T:

type Arg0<T> =  T extends (p1: infer U) => any ? U: never;
function on<T extends keyof Callback>(eventName: T, callback: (e: Arg0<Callback[T]>) => void) : void { }

on("error", e=> e.stack);
on("connected", e=> e.substr(1));

Answer 3

Answer №2

Looks like you might be overcomplicating things.

Events could potentially be organized in an enum.

enum EVENTS{
  ERROR = "ERROR",
  CONNECTED = "CONNECTED"
}

Instead of a generic method, it might be beneficial to have a specific method.

function on(eventName: EVENTS, callback: (v: any) => void): void { }

Here are a couple of examples:

on(EVENTS.ERROR, (v: any) => {
  if(v instanceof Error){
    console.log(v.stack);
  }
});

on(EVENTS.CONNECTED, (v: any) => {
  console.log(v);
});

It can be challenging to determine the type of the event value.

Apologies. Here is an updated function.

function on<T>(eventName: EVENTS, callback: (v: T) => void): void { }

on<Error>(EVENTS.ERROR, (err) => {  
    console.log(err.stack);  
});

on<any>(EVENTS.CONNECTED, (v) => {
  console.log(v);
});

Answer 4

Looks like you might be overcomplicating things.

Events could potentially be organized in an enum.

enum EVENTS{
  ERROR = "ERROR",
  CONNECTED = "CONNECTED"
}

Instead of a generic method, it might be beneficial to have a specific method.

function on(eventName: EVENTS, callback: (v: any) => void): void { }

Here are a couple of examples:

on(EVENTS.ERROR, (v: any) => {
  if(v instanceof Error){
    console.log(v.stack);
  }
});

on(EVENTS.CONNECTED, (v: any) => {
  console.log(v);
});

It can be challenging to determine the type of the event value.

Apologies. Here is an updated function.

function on<T>(eventName: EVENTS, callback: (v: T) => void): void { }

on<Error>(EVENTS.ERROR, (err) => {  
    console.log(err.stack);  
});

on<any>(EVENTS.CONNECTED, (v) => {
  console.log(v);
});

Leveraging TypeScript generics for indexing

Answer №1

Answer №2

Similar questions

Mastering the proper implementation of observables, async/await, and subscribing in Angular

Creating circular artwork with PixiJS: A step-by-step guide

How to refresh a page manually in Angular 2

Discover how TypeScript's strictNullChecks feature can help you identify null values with ease in your functions

Having trouble importing a TypeScript module from the global node_modules directory

Creating a customized HTTP class for Bootstrap in Angular 2 RC 5

What is the best way to assign JSON values to my class property?

typescript push in react native is a crucial step to enhance performance and optimize

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Struggling to convert my VueJS component from JavaScript to TypeScript, feeling a bit lost

Tips for customizing the appearance of a label when a MUI Radio Button is selected

ANGULAR: Issue with filtering an array by clicking a button is not functioning

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

Exploring the concept of inheritance and nested views within AngularJS

Is there a way to reset static data in a TypeScript subclass? (or alternative method for managing global data)

I'm looking to send a response with data using Nest JS API and Postman. How can I accomplish this

What could be causing my items to appear twice and as blank elements?

Limit the types of function parameters to only one option within a union type parameter

Modify one specific variable within my comprehensive collection on Firebase Firestore

What are some methods for utilizing the "name" attribute within React components?