What is the correct way to start a typed Object in TypeScript/Angular?

Question

What is the correct way to start a typed Object in TypeScript/Angular?

As I delve into the world of Angular and TypeScript, I am faced with a dilemma regarding how to initialize an object before receiving data from an API request.

Take for instance my model:

//order.model.ts
export class Order {
  constructor(public id: number, currency: string, public contact: Object, public items: Array<Object>) {}
}

In one of my components, let's say the App component, I attempt to instantiate this model:

//app.component.ts
export class AppComponent {
  @Input()
  public order: Order = new Order();
}

However, when trying to create a new Order object, it requires 4 arguments but none were provided. Should I pass in undefined or empty values for each attribute of Order?

In React (without TypeScript), I would simply initialize with an empty object:

this.state = {
 order: {}
}

What is considered best practice for handling this situation in Angular and TypeScript?

javascript angular typescript

Answer 1

Answer №1

A practical approach would involve passing 4 default arguments to the constructor if using the current setup.

For instance, initializing a public order like this: Order = new Order(1, '', {}, []);

Alternatively, you can make each property nullable by adding a ? like this:

export class Order {
  constructor(public id?: number, currency?: string, public contact?: Object, public items?: Array<Object>) {}
}

If the class is solely for type checking without any functionality, it's recommended to declare an interface as shown below (nullable properties denoted by ?s):

export interface Order {
    id: number;
    currency: string;
    contact: Object;
    items: Object[];
}

In your component, avoid initializing the value until all necessary values are available:

//app.component.ts
export class AppComponent {
  @Input()
  public order: Order;

  // Example method for setting values
  setValues(id: number, currency: string, contact: Object, items: Object[]) {
    this.order = {
      id: id,
      currency: currency,
      contact: contact,
      items: items
    }
  }

  // Example method for fetching data from backend
  getData() {
    this.service.getData().subscribe(result => {
       this.order = result;
    });
  }
}

Answer 2

A practical approach would involve passing 4 default arguments to the constructor if using the current setup.

For instance, initializing a public order like this: Order = new Order(1, '', {}, []);

Alternatively, you can make each property nullable by adding a ? like this:

export class Order {
  constructor(public id?: number, currency?: string, public contact?: Object, public items?: Array<Object>) {}
}

If the class is solely for type checking without any functionality, it's recommended to declare an interface as shown below (nullable properties denoted by ?s):

export interface Order {
    id: number;
    currency: string;
    contact: Object;
    items: Object[];
}

In your component, avoid initializing the value until all necessary values are available:

//app.component.ts
export class AppComponent {
  @Input()
  public order: Order;

  // Example method for setting values
  setValues(id: number, currency: string, contact: Object, items: Object[]) {
    this.order = {
      id: id,
      currency: currency,
      contact: contact,
      items: items
    }
  }

  // Example method for fetching data from backend
  getData() {
    this.service.getData().subscribe(result => {
       this.order = result;
    });
  }
}

What is the correct way to start a typed Object in TypeScript/Angular?

Answer №1

Similar questions

Utilizing Ajax to upload various files from separate input sources simultaneously

What is the correct method for storing a response in an array variable in Angular?

Differences Between Angular Module and Library

Testing files outside of the project directory in Angular + Karma can present challenges in performing thorough analysis and evaluation

Find the difference between array_A and the documents in array_B using MongoDB's $match operator, and return the result as Array_C

An error was encountered while attempting to utilize Google's Core Reporting API: Uncaught SyntaxError: Unexpected token <

Issue encountered with the URL for the image in a JSON file following the utilization of multer for image uploads in a Node.js

A guide on refreshing the dependencies list within Angular's node modules and package.json files

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

What strategies can I employ to optimize this code in RXJS and Angular?

Ways to resolve Cross-Origin Resource Sharing (CORS) issue encountered in Report

Potential Javascript timing problem encountered during webpage initialization – involving the implementation of a dynamic bootstrap progress

Inspecting every element within an array and indicating a negative outcome if any item is not a string

I'm encountering issues with undefined parameters in my component while using generateStaticParams in Next.js 13. What is the correct way to pass them

Why is the Twitch api map function returning nothing, while the console log is showing output?

Encountering a Next.js installation error due to the inability to locate the module fs

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

The initial function that gets executed in the lodash chain is tap()

Looking for tags similar to stackoverflow?

Does the message "The reference 'gridOptions' denotes a private component member in Angular" signify that I may not be adhering to recommended coding standards?