Typescript interface – add new value dynamically or create the interface dynamically

Issue

I have an Angular Material Table. Obviously, I have an interface from which is created the dataSource for the table. Is there any possibility to add a new value dynamically in the interface Or at least to create the interface dynamycally? Because the data which is coming from the backend it’s unknown.
Example: from this:

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

to this:

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  index: number;
}

or from this:

export interface PeriodicElement {}

to this:

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  index: number;
}

Solution

  1. It will be better to use it like,
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  [key: string]: string | number;
}

or just

export interface PeriodicElement {
  [key: string]: string | number;
}
  1. Otherwise you can create separate models and use union(|) operator.

  2. Also you can use Partials to achieve this.

  3. For creating dynamically Refer here

Answered By – JsNgian

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.