A different approach to handling multiple constructors in Angular 4

Question

A different approach to handling multiple constructors in Angular 4

Angular 4 does not support having multiple constructors, so I need to find a cleaner way to instantiate my object.

This is what my model looks like:

export class SrcFilter {
    constructor(public firstList?: Array<String>, public secondList?: Array<String>, public thirdList?: Array<String>,
                public fourthList?: Array<String>, public fifthList?: Array<String>, public sixthList?: Array<String>) {
     }
}

Currently, I have to instantiate it like this:

allFilters: SrcFilter = new SrcFilter([], [], [], [], [], []);

Having to initialize six lists is not ideal. I tried adding a second empty constructor to be able to do something like:

new SrcFilter()

However, Angular complains about having multiple constructor implementations.

angular typescript

Answer 1

Answer №1

To address any lack of injection by Angular, you have the option to utilize Factory methods for a more straightforward approach. Here is an example:

export class SrcFilter {
  constructor(public aList?: Array<String>, public bList?: Array<String>, public cList?: Array<String>,
            public dList?: Array<String>, public eList?: Array<String>, public fList?: Array<String>) {
  }

  public static getDefault():SrcFilter {
    return new SrcFilter([],[],[],[],[],[]);
  }
}

Subsequently, you can create new instances using this line of code:

SrcFilter.getDefault();

Answer 2

To address any lack of injection by Angular, you have the option to utilize Factory methods for a more straightforward approach. Here is an example:

export class SrcFilter {
  constructor(public aList?: Array<String>, public bList?: Array<String>, public cList?: Array<String>,
            public dList?: Array<String>, public eList?: Array<String>, public fList?: Array<String>) {
  }

  public static getDefault():SrcFilter {
    return new SrcFilter([],[],[],[],[],[]);
  }
}

Subsequently, you can create new instances using this line of code:

SrcFilter.getDefault();

A different approach to handling multiple constructors in Angular 4

Answer №1

Similar questions

What is the best way to decouple the data layer from Next.js API routes?

ESLint not functioning properly on TypeScript (.ts and .tsx) files within Visual Studio Code

What is the best way to specify the type of a property that has already been assigned

Avoiding misreading email content with mail-listener2 - Tips for ensuring your function reads the correct emails

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

Implementing a click event on an image in an Angular 4 application

Guide on Creating a Custom Property within the Same Component in Angular 2

Enhancing interface properties with type safety in a function declaration using Typescript

Using aliased imports is no longer an option when setting up a new TypeScript React application

The distinctUntilChanged function encounters an issue when no comparison function is given

Testing in Vue revealed an unexpected absence of data

Navigating focus within form elements using Angular techniques

Avoiding the ESLint error of missing return type in a React TypeScript function

Developing a type specifically for this function to operate on tuples of varying lengths

Issues arise with transferring React component between different projects

Building a table with Next.js

Steps to extract key and value from a collection in Firebase database

What is the correct way to declare the mongoose _id in a TypeScript interface?

Is your async function lacking a return statement?

Validating Form Controls with Dynamic Names in Angular 5