Creating a custom Map for storing Subject and BehaviorSubject instances with varying data types

Question

Creating a custom Map for storing Subject and BehaviorSubject instances with varying data types

How can I create a Typescript Map to store Subject/BehaviorSubject instances of different data types?

I am looking to implement a Map in one of my service classes that can store Subjects of various data types using Typescript. The key for this map will be a number data type. How should I declare and initialize this Map? Below is the example code snippet:

export class EventBusService {
private events: Map<number, Subject<any>>;
constructor() { }
public registerEvent<T>(id: number, initial: T): BehaviorSubject<T> {
if (this.events.has(id)) {
  throw new Error('The event id already exists: ' + id);
 }

  const subject = new BehaviorSubject<T>(initial);
  this.events.set(id, subject);
  return subject;
 }
}

typescript behaviorsubject subject-observer

Answer 1

Answer №1

When dealing with variables of unknown type, use any. If you prefer to cast as an object instead, use Object.

private events: Map<number, Subject<any>>;

Learn more about Typescript data types here.

UPDATE:

To capture the type, use a function that returns the desired type.

function identity<T>(arg: T): T {
   return arg;
}
var result = identity("hello generics"); // returns 'string'

For example, when making an AJAX request:

function getAsync<T>(url: string): Promise<T[]> {
   return fetch(url).then((response: Response) => response.json());
}
getAsync<Movie>("/movies").then(movies => {
    movies.forEach(movie => {
        console.log(movie.title);
    });
});

Another option is to utilize T in an interface declaration like interface Array<T>, then cast using that interface. However, keep in mind that you can't use T for variable declarations; opt for any instead.

Read up on Typescript Generics here.

Answer 2

When dealing with variables of unknown type, use any. If you prefer to cast as an object instead, use Object.

private events: Map<number, Subject<any>>;

Learn more about Typescript data types here.

UPDATE:

To capture the type, use a function that returns the desired type.

function identity<T>(arg: T): T {
   return arg;
}
var result = identity("hello generics"); // returns 'string'

For example, when making an AJAX request:

function getAsync<T>(url: string): Promise<T[]> {
   return fetch(url).then((response: Response) => response.json());
}
getAsync<Movie>("/movies").then(movies => {
    movies.forEach(movie => {
        console.log(movie.title);
    });
});

Another option is to utilize T in an interface declaration like interface Array<T>, then cast using that interface. However, keep in mind that you can't use T for variable declarations; opt for any instead.

Read up on Typescript Generics here.

Creating a custom Map for storing Subject and BehaviorSubject instances with varying data types

Answer №1

Similar questions

The Angular 2 bootstrap function is throwing an error stating that the argument type AppComponent cannot be assigned to the parameter type Type

Types that refer to themselves in a covariant manner

Identifying shifts between components

How can you transform an object literal AST from a TypeScript file into executable code?

Troubleshooting: Resolving the issue of the 'innerHTML' property not being able to be set in Angular 6

Encountering type errors in React+Typescript while dynamically setting values in the change handler

Ways to speed up the initial loading time in Angular 7 while utilizing custom font files

Leverage async and await features in TypeScript aiming at ES5 compatibility

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

Learn how to dynamically disable a button based on the input state matching an email pattern!

Angular provides a convenient way to call an API on key press. Let's delve

Ways to display a component with different initial state when needed?

Tips for creating a page component in Next.js using props?

Revise Swagger UI within toggle button switch

Angular is declining to implement the style originating from the specified URL

Automatically include a new row in the text area as the user inputs text

Matching only the specified Records in an array of Typescript generic objects

Error message in Vue3 with TypeScript: When using global components, you may encounter the error "JSX element type '___' does not have any construct or call signatures.ts(2604)."

Establish a connection to Cosmos DB from local code by utilizing the DefaultAzureCredential method

Utilize multiple parameters in custom validation rules in Vue 3 with the help of vuelidate