Create a function to set initial values for variables in a TypeScript class

Question

Create a function to set initial values for variables in a TypeScript class

I have the following code snippet in my constructor to initialize the variables.

public Elements: Observable<dcElementDataStoreItem>;
private elementSubjectData: BehaviorSubject<dcElementDataStoreItem>;

constructor() {
  this.elementSubjectData = new BehaviorSubject([]) as BehaviorSubject<ElementDataStoreItem>;
  this.Elements = this.elementSubjectData.asObservable();
}

Currently, there are only 2 lines of code for initialization but I may have multiple similar items to set up. Is it possible to optimize it like the proposed code below (although it does not work)?

constructor() {
  this.initSubjectData<dcElementDataStoreItem>(this.elementSubjectData, this.Elements);
}

private initSubjectData<T>(privateList: BehaviorSubject<T>, publicList: Observable<T>) {
  privateList = new BehaviorSubject([]) as BehaviorSubject<T>;
  publicList = privateList.asObservable();
}

This way, I aim to make use of the initSubjectData method for initializing all other potential elements.

angular typescript initialization code-reuse modularity

Answer 1

Answer №1

Unlike some other programming languages, TypeScript does not allow passing a field "by reference." However, you can work around this limitation by passing in the field names instead and accessing them via indexing. This approach ensures type safety since TypeScript supports the concept of a type that is a key of another type.

public elementSubjectData: BehaviorSubject<ElementDataStoreItem>;
public Elements: Observable<ElementDataStoreItem>;

constructor() {
    this.initSubjectData("elementSubjectData", "Elements");
}

private initSubjectData(privateListField: keyof this, publicListField:  keyof this) {
    let privateList = new BehaviorSubject([]);
    this[privateListField] = new BehaviorSubject([]) as any;
    this[publicListField] = privateList.asObservable() as any;
}

However, there are two drawbacks to this method:

There is no check on field type.
The properties must be public for the field to be a keyof this.

We can address issue number 1 by introducing a second function that returns a typed representation of the field:

interface Field<TName, TType> {
    name: string;
    set(value: TType): void;
}

// Inside the class
constructor() {
    this.initSubjectData(this.field("elementSubjectData"), this.field("Elements"));
}

field<TKey extends keyof this>(name: TKey): Field<TKey, this[TKey]> {
    return {
        name,
        set: (value) => {
            this[name] = value
        }
    };
}

private initSubjectData<T>(privateListField: Field<keyof this, BehaviorSubject<T>>, publicListField:  Field<keyof this, Observable<T>>) {
    let privateList = new BehaviorSubject([]) as BehaviorSubject<T>;
    privateListField.set(privateList);
    publicListField.set(privateList.asObservable());
}

Answer 2

Unlike some other programming languages, TypeScript does not allow passing a field "by reference." However, you can work around this limitation by passing in the field names instead and accessing them via indexing. This approach ensures type safety since TypeScript supports the concept of a type that is a key of another type.

public elementSubjectData: BehaviorSubject<ElementDataStoreItem>;
public Elements: Observable<ElementDataStoreItem>;

constructor() {
    this.initSubjectData("elementSubjectData", "Elements");
}

private initSubjectData(privateListField: keyof this, publicListField:  keyof this) {
    let privateList = new BehaviorSubject([]);
    this[privateListField] = new BehaviorSubject([]) as any;
    this[publicListField] = privateList.asObservable() as any;
}

However, there are two drawbacks to this method:

There is no check on field type.
The properties must be public for the field to be a keyof this.

We can address issue number 1 by introducing a second function that returns a typed representation of the field:

interface Field<TName, TType> {
    name: string;
    set(value: TType): void;
}

// Inside the class
constructor() {
    this.initSubjectData(this.field("elementSubjectData"), this.field("Elements"));
}

field<TKey extends keyof this>(name: TKey): Field<TKey, this[TKey]> {
    return {
        name,
        set: (value) => {
            this[name] = value
        }
    };
}

private initSubjectData<T>(privateListField: Field<keyof this, BehaviorSubject<T>>, publicListField:  Field<keyof this, Observable<T>>) {
    let privateList = new BehaviorSubject([]) as BehaviorSubject<T>;
    privateListField.set(privateList);
    publicListField.set(privateList.asObservable());
}

Create a function to set initial values for variables in a TypeScript class

Answer №1

Similar questions

Having trouble connecting Nextjs with ChromaDB?

Issue with displaying ngRx/store Observable values in Angular template

What is the best way to organize information within a template using a *ngFor loop without needing to include functions directly in the template?

How can I delete the black background from the ion-tab-bar in Ionic 7?

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

Errors in TypeScript are being brought up by using if-else statements inside a loop

Angular Material Themes - retrieve the current main color shade

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

Ways to modify environment variables in Angular 6 without the need to rebuild

The error in React TypeScript with react-markdown: "No matching overload found for this call

Switch branches to projects without node_modules installed

Generate a collection of elements using a different collection as a reference

Unable to download files from Angular frontend connected to Spring backend, experiencing corruption or malfunction

Transferring properties to components within ng-content (attributes that are not accessible in the component where the code is located)

Angular appears to be having trouble with localStorage functionality

Encountering Main.js Path Error in Asp.net Core and Angular 2 Integration

Change number-type object fields to string representation

What is the best way to exhibit information from a lone table column in a modal using Angular 7?

The mat-table is failing to fetch data from the API, despite the API functioning properly

Settings for various filters