Optimal strategy for initializing class members

When declaring a class with a member like:

import {Subject} from "rxjs";

export class MyClass {
  protected subject: Subject<string>;
}

what is the preferred practice in TypeScript for initializing the subject member? Is it better to do it in the constructor like:

export class MyClass {
  protected subject: Subject<string>;

  constructor() {
    this.subject = new Subject<string>();
  }
}

or directly inline within the class body like:

export class MyClass {
  protected subject: Subject<string> = new Subject<string>();
}

NOTE

Inline initialization works with imported classes like Subject in this case, but not with injected classes which are typically initialized in the constructor.

EDIT

The Angular Style Guide does not specifically address this topic.

Answer №1

Does it really make a difference? The two code snippets will ultimately be transformed into identical code:

export class MyClass {
    constructor() {
        this.subject = new Subject();
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Typescript to define Vuex store types

Attempting to create a TypeScript-friendly Vuex store has been quite the challenge. Following instructions outlined here, I've encountered an issue where accessing this.$store from a component results in a type of Store<any>. I'm strugglin ...

Converting custom JSON data into Highcharts Angular Series data: A simple guide

I am struggling to convert a JSON Data object into Highcharts Series data. Despite my limited knowledge in JS, I have attempted multiple times without success: Json Object: {"Matrix":[{"mdate":2002-02-09,"mvalue":33.0,"m ...

Typescript encounters a failure in typing when an object is destructured

There is a function that returns an object with two properties (res, mes) where one of them could be null: const fetchJSON = <Res, Body>(link: string, body: Body): Promise<{ res: Res; mes: null } | { res: null; mes: Popup }> => { return n ...

Having trouble transferring data from indexedDB to an Angular Subject in order to utilize it within an Observable using ngx-indexed-db

When using ngx-indexed-db's getByKey method to retrieve data from indexedDB and passing it to the subject, there seems to be an issue. Although the data is successfully retrieved, an error occurs stating that the data is undefined when attempting to u ...

What is the alternative parameter to use instead of onChange in React Router v4?

Having an issue with the onChange Prop in TypeScript and React JS: I am encountering an error message saying "No overload matched this call." <HashRouter> <Switch> <Route path="/" ...

Retrieving the ngModel value in Ionic without triggering any actions

After trying to send the value of <ion-text> to a TypeScript file when a button is clicked on the same HTML page, I encountered an issue where it didn't work as expected. <ion-text [(ngModel)]='xy' ngDefaultControl >'vari ...

Show a modal when the axios request is finished

EDIT: After some exploration, I've shared the solution I found in case it helps others facing a similar issue. I'm currently working on building a reusable Bootstrap 5 modal child component within Vue3. The goal is to pass an ID as a prop from t ...

How can you customize the appearance of the filledInput component within a TextField component in Material UI?

I need some guidance on how to change the color of the FilledInput component within a TextField. Unlike InputProps, FilledInputProps are not directly accessible for styling with classes. Any suggestions on how I can customize the styling of the FilledInpu ...

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

I'm working with an API that returns an object containing a list of various concrete types that share a common base. Is there a way to automate the process of mapping these items to a specific Typescript interface model-type without having to manually ...

Verify and retrieve information from the Dynamics CRM Web API with the help of Angular 2 (TypeScript)

How can one authenticate and query the Dynamics CRM Web API from a Single Page Application developed with Angular 2 (TypeScript)? Initial research indicates that: The Dynamics CRM (version 2016 or 365) instance needs to be registered as an application ...

Manipulating a <DIV> style within an Angular 8 project

Looking to change the display style? Check out this template: <div style="display: none" #myDiv /> There are 2 methods to achieve this: Method 1: Directly if (1===1) this.myDiv.style.display = "block"; Method 2: Using @ViewChild @ViewChild(&apo ...

The table component in Primeng is encountering issues when being used with ngFor

I'm attempting to iterate through an array where each object represents a table in HTML, and it should be displayed like this: <p-table [value]="section" *ngFor="let section of sections"> <ng-template pTemplate="header"> <t ...

Trying out the MatDialogRef overlayref: A step-by-step guide

What is the best way to test dialogref coming from MatDialogRef? dialogRef: MatDialogRef<testComponent>; displayBackdrop() { const backdrop = this.dialogRef['_ref'].overlayRef._backdropElement.style.display = 'block' ...

Implementing a Set polyfill in webpack fails to address the issues

Encountering "Can't find variable: Set" errors in older browsers during production. Assumed it's due to Typescript and Webpack leveraging es6 features aggressively. Shouldn't be a problem since I've successfully polyfilled Object.assign ...

Error encountered when utilizing cursor in Prisma

I am currently utilizing Prisma version 4.2.1 within a Next.js API Route to implement cursor-based pagination for posts. Upon passing the cursor to the API endpoint, I encounter an error message (500) in the console: TypeError: Cannot read properties of u ...

Issues with Next.js and Framer Motion

My component is throwing an error related to framer-motion. What could be causing this issue? Server Error Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function This error occurred during page generation. Any console logs will be ...

Obtain data from Child Component and pass it to the Parent model in Angular 9

With a simple form in place, I aim to incorporate user selection via material table selection instead of a select field. This way, I can view user details before making a selection. The form and select model are functional, but transferring the selection ...

Reconfigure an ancestral item into a designated key

I have a single object with an array of roles inside, and I need to transform the roles into an array of objects. See example below: Current Object: displayConfiguration: { widgetList: { widgetName: 'widget title', entityType: 'As ...

Angular - Using HttpClient for handling POST requests

The example provided in the official Angular HttpClient documentation demonstrates how to make a POST request to a backend server. /** POST: add a new hero to the database */ addHero (hero: Hero): Observable<Hero> { return this.http.post<Hero&g ...

Validation in Angular2 is activated once a user completes typing

My goal is to validate an email address with the server to check if it is already registered, but I only want this validation to occur on blur and not on every value change. I have the ability to add multiple controls to my form, and here is how I have st ...