Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

Question

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

I am currently developing a class using Angular and I need to share multiple states associated with that class. To accomplish this, I have created several instances of BehaviorSubject

private subjects = {
    a : new BehaviorSubject<A>(this.a),
    b : new BehaviorSubject<B>(this.b),
    c : new BehaviorSubject<C>(this.c),
    d : new BehaviorSubject<D>(this.d),
    e : new BehaviorSubject<E>(this.e),
}

In order to prevent exposing the Observer side of these subjects and only make the Observable side accessible, I have kept the subjects private and exposed them as observables:

observables = {
    a : this.subjects.a.pipe(share()),
    b : this.subjects.b.pipe(share()),
    c : this.subjects.c.pipe(share()),
    d : this.subjects.d.pipe(share()),
    e : this.subjects.e.pipe(share()),
}

I believe that the process of generating observables from the subjects should be automated so that when additional subjects are added, manual adjustments to the observables are not required. This could be done in a way similar to the following:

observables = (()=>{
    let observables : {[Property in keyof typeof this.subjects]:Observable} = {}
    for(let key in this.subjects)
    {
        observables[key] = this.subjects[key as keyof typeof this.subjects].pipe(share())
    }
    return observables;
})();

The challenge here lies in defining the generic type for Observable and share. How can I overcome this issue or is there a better design pattern available?

angular typescript rxjs observable

Answer 1

Answer №1

From my understanding, there is no need to share the BehaviorSubject observable as it is inherently hot due to its nature as a BehaviorSubject.

To address generic typing issues, you can leverage Mapped types:

const subjects = {
  a: new BehaviorSubject<number>(1),
  b: new BehaviorSubject<string>('foo'),
  c: new BehaviorSubject<boolean>(false),
};

// define a utility type to convert BehaviorSubject<T> to Observable<T> 
type BehaviorSubjectToObservable<T> = 
  T extends BehaviorSubject<infer U> ? Observable<U> : never;

// create a type for the resulting object that maps keys to Observable<T>
type Observables<T> = {
  [P in keyof T]: BehaviorSubjectToObservable<T[P]>;
};

// transform the object using reduce function
const observables = Object.entries(subjects).reduce(
  (acc, [key, subject]) => ({ ...acc, ...{ [key]: subject.asObservable() } }),
  {} as Observables<typeof subjects>,
);

// typeof observables.a = Observable<number>
// typeof observables.b = Observable<string>
// typeof observables.c = Observable<boolean>

Answer 2

From my understanding, there is no need to share the BehaviorSubject observable as it is inherently hot due to its nature as a BehaviorSubject.

To address generic typing issues, you can leverage Mapped types:

const subjects = {
  a: new BehaviorSubject<number>(1),
  b: new BehaviorSubject<string>('foo'),
  c: new BehaviorSubject<boolean>(false),
};

// define a utility type to convert BehaviorSubject<T> to Observable<T> 
type BehaviorSubjectToObservable<T> = 
  T extends BehaviorSubject<infer U> ? Observable<U> : never;

// create a type for the resulting object that maps keys to Observable<T>
type Observables<T> = {
  [P in keyof T]: BehaviorSubjectToObservable<T[P]>;
};

// transform the object using reduce function
const observables = Object.entries(subjects).reduce(
  (acc, [key, subject]) => ({ ...acc, ...{ [key]: subject.asObservable() } }),
  {} as Observables<typeof subjects>,
);

// typeof observables.a = Observable<number>
// typeof observables.b = Observable<string>
// typeof observables.c = Observable<boolean>

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

Answer №1

Similar questions

What is the best way to set up an empty {[key: string]: string} object in TypeScript?

Typescript enhances Solid JS by using the "as" prop and the "component" prop

Troubleshooting the "invalid configuration" error when using Angular CLI to create a new app

Issue regarding custom CSS implementation in Angular project

Tips for creating a responsive swiper slider in an Angular project

Displaying [object Object] in Angular Material datatable

What are the circumstances under which JavaScript GCP libraries return null values?

An error occurs when attempting to access a property that does not exist on type 'never'. Why is this considered an error rather than a warning?

Zero's JSON Journey

Discover an alternative to Events by harnessing the power of Observables to effectively listen for dismiss events in Angular Ionic

Mapping an array of keys to an array of properties using Typescript

Sharing information between components in Angular 4 and .NET Core applications

Using a universal class URL for all components in Angular 6: Tips and tricks

What could be causing the sluggish performance of my protractor test cases?

Whenever a file is chosen, I aim to generate the video HTML dynamically and display the video with play functionalities using Angular 2 and TypeScript

TypeScript Generics: Property types do not match (the properties listed are missing)

Tips for resolving the "trim" of undefined property error in Node.js

How to Implement checked radio buttons in Angular 2 using ngModel

Creating Unique Layouts for Specific Routes in Next.js App Router

Error encountered when utilizing Meteor in conjunction with TypeScript