Varieties of types within class structures

Question

Varieties of types within class structures

I've been delving into the world of implementing generic types in classes, but it seems that my understanding of what can and cannot be done with generics is a bit lacking.

Hopefully someone out there can shed some light on this for me!

My Objective

I have created a class designed to register tasks and execute them later based on their IDs. Each taskObject consists of a taskId: string and a callback function

callback: <R>(...args: any) => R

. Tasks are registered during class instantiation.

The main idea is to have type information about the return type of the callback function for each individual task.

Thus, taskId is a literal type, and the callback should be an arbitrary function where I want to infer the return type and then make this return type accessible within the class.

The Code Snippet


type Task<T extends string, V extends <R>(...args: any) => R> = {
  taskId: T,
  callback: V // <-- I'm aiming to resolve this
}

class Taskmanager<T extends string, V extends <R>(...args: any) => R> {

  private callbacks = new Map<T, V>();

  public constructor(tasks: Task<T,V>[]) {
    tasks.forEach(task => {
      this.callbacks.set(task.taskId, task.callback);
    });
  }

  public runCallback(taskId: T) {
    return this.callbacks.get(taskId)?();
  }
}

This is just the initial step → now I have type hints for all registered taskIds.

const tm = new Taskmanager([
  {
    taskId: "hello",
    callback: () => "world" // <-- TS error: Type 'string' is not assignable to type 'R'
  },
  {
    taskId: "circle",
    callback: () => 360 // <-- TS error: Type 'number' is not assignable to type 'R'
  }
]);

// Now I get type hints for `taskId` → "hello" | "circle"
const resHello = tm.runCallback("hello"); // <-- I expect: typeof resHello === "string" --> true
const resCircle = tm.runCallback("hello"); // <-- I expect: typeof resCircle === "number" --> true

Check out the TypeScript Playground link

Although I successfully limited the selection to only between hello and circle as parameters in runCallback, I encountered TypeScript errors when declaring the callback functions in the class constructor.

// TS Error for taskId: "hello"
Type 'String' is not assignable to type 'R'.
  'R' could take on any unrelated type that may not be a 'String'.

Is there a feasible way to automatically infer the return type of each callback function? Is this even achievable?

I did browse through several other questions and answers on StackOverflow, but unfortunately, I haven't been able to extract anything useful yet.

I apologize if this question seems trivial. Sometimes working with TS can definitely drive one crazy...

Thank you! 🙌

javascript typescript class generics

Answer 1

Answer №1

Considering that the callbacks will be called without any arguments, it is advisable to constrain V to () => any, rather than <R>(...args: any) => R (which introduces a form of generics that may not be implementable properly). Alternatively, you could just use R and have callback as type () => R, but for now, let's make the necessary minimum changes:

type Task<K extends string, V extends () => any> = {
  taskId: K
  callback: V
}

Since you intend to provide an array of entries to the constructor of Taskmanager, we need to add a generic type T to represent elements in that array like so:

class Taskmanager<const T extends Task<string, () => any>> {

  private callbacks = new Map<string, () => any>;

  public constructor(tasks: readonly T[]) {
    tasks.forEach(task => {
      this.callbacks.set(task.taskId, task.callback);
    });
  }

I defined it as a const type parameter because we want the compiler to infer string literal types for the taskId properties instead of just string.

Also note that I kept callbacks as a Map<string, ()=>any> as making it specific to

T</code wouldn't preserve the relationship between keys and values. However, should you require something more specialized with <code>Map

, custom types can be implemented, although it may be excessive in this scenario. For simplicity, we're using () => any and exercising caution when implementing runCallback().

The implementation of runCallback() appears as follows:

  public runCallback<K extends T["taskId"]>(taskId: K):
    ReturnType<Extract<T, { taskId: K }>["callback"]> {
    return this.callbacks.get(taskId)!();
  }
}

This method signature may seem complex, but given that T is a union of subtypes of Task<string, ()=>any>, these constraints are necessary. By restricting K to the union of taskId properties of T, we define a suitable return type leveraging TypeScript utilities like Extract and ReturnType. Ensuring non-nullness when retrieving from the map is crucial to prevent errors due to the type being inferred as any.

Let's proceed with testing:

const tm = new Taskmanager([
  {
    taskId: "hello",
    callback: () => "world"
  },
  {
    taskId: "circle",
    callback: () => 360
  }
]);
/* const tm: Taskmanager<{
    readonly taskId: "hello";
    readonly callback: () => string;
} | {
    readonly taskId: "circle";
    readonly callback: () => number;
}> */

const res = tm.runCallback("hello");
// const res: string
console.log(res.toUpperCase()) // "WORLD"

All seems well. The constructor call is successfully processed, and the typing information embedded within tm aids in correctly inferring the output type of

tm.runCallback("hello")

as string.

Playground link to code

Answer 2

Considering that the callbacks will be called without any arguments, it is advisable to constrain V to () => any, rather than <R>(...args: any) => R (which introduces a form of generics that may not be implementable properly). Alternatively, you could just use R and have callback as type () => R, but for now, let's make the necessary minimum changes:

type Task<K extends string, V extends () => any> = {
  taskId: K
  callback: V
}

Since you intend to provide an array of entries to the constructor of Taskmanager, we need to add a generic type T to represent elements in that array like so:

class Taskmanager<const T extends Task<string, () => any>> {

  private callbacks = new Map<string, () => any>;

  public constructor(tasks: readonly T[]) {
    tasks.forEach(task => {
      this.callbacks.set(task.taskId, task.callback);
    });
  }

I defined it as a const type parameter because we want the compiler to infer string literal types for the taskId properties instead of just string.

Also note that I kept callbacks as a Map<string, ()=>any> as making it specific to

T</code wouldn't preserve the relationship between keys and values. However, should you require something more specialized with <code>Map

, custom types can be implemented, although it may be excessive in this scenario. For simplicity, we're using () => any and exercising caution when implementing runCallback().

The implementation of runCallback() appears as follows:

  public runCallback<K extends T["taskId"]>(taskId: K):
    ReturnType<Extract<T, { taskId: K }>["callback"]> {
    return this.callbacks.get(taskId)!();
  }
}

This method signature may seem complex, but given that T is a union of subtypes of Task<string, ()=>any>, these constraints are necessary. By restricting K to the union of taskId properties of T, we define a suitable return type leveraging TypeScript utilities like Extract and ReturnType. Ensuring non-nullness when retrieving from the map is crucial to prevent errors due to the type being inferred as any.

Let's proceed with testing:

const tm = new Taskmanager([
  {
    taskId: "hello",
    callback: () => "world"
  },
  {
    taskId: "circle",
    callback: () => 360
  }
]);
/* const tm: Taskmanager<{
    readonly taskId: "hello";
    readonly callback: () => string;
} | {
    readonly taskId: "circle";
    readonly callback: () => number;
}> */

const res = tm.runCallback("hello");
// const res: string
console.log(res.toUpperCase()) // "WORLD"

All seems well. The constructor call is successfully processed, and the typing information embedded within tm aids in correctly inferring the output type of

tm.runCallback("hello")

as string.

Playground link to code

Varieties of types within class structures

My Objective

The Code Snippet

Answer №1

Similar questions

Retrieve a specific div within another div by targeting both parent and child classes dynamically

What is the best way to retrieve the parent of the initial jQuery object?

Clearing up memory in ThreeJS application

Activate onchange when including/excluding an option in a dropdown menu (ReactJs)

Creating a responsive HTML, CSS, and JavaScript popup: A step-by-step guide

The ASPX validation will not be able to access the .js file

What is the best way to locate a shadow root child when waiting for it to appear?

I was confused about the distinction between the https.get() and https.request() functions in the Node.js npm package for https

Using Leaflet JS to implement multiple waypoints on a map

Sequelize Error: Cannot call User.hasMany as a function

Generating a new POST header

How about using take(1) in conjunction with an Observable<boolean>?

Leverage ajax to trigger php which then executes python code and retrieves the desired outcome

Incorrectly parsing data in ReactJS leads to errors

obtain the position of an element within an array

The JavaScript syntax dollar sign

Looking to bring in a non-ES6 library into VueJS without using export statements

Is it possible to dynamically import a Vue.js component based on a prop value?

Angular 6 methods that handle Observable data from HTTP GET requests complete execution before constructing the final Data

transform an array encoded in base64 format into a JSON object