Creating interactive features for a TypeScript interface

Question

Creating interactive features for a TypeScript interface

I was looking to create a dynamic interface with custom properties, like so:

data: dataInterface [];

this.data = [
  {
    label: {
      text: 'something',
      additionalInfo: 'something'
    }
  },
  {
    bar: {
      text: 'something',
      additionalInfo: 'something'
    }
  },
  {
    whatever: {
      text: 'something',
      additionalInfo: 'something'
    }
  },
];

The labels can be anything and there can be any number of items in the array.

I attempted the following approach:

export interface dataInterface {
  [propName: string]: subDataInterface;
}

interface subDataInterface {
  text: string;
  additionalInfo: string;
}

However, this solution wasn't successful for me. My end goal is to modify the data like this:

this.dataInterface.bar.text = "another example text";

Any suggestions?

typescript

Answer 1

Answer №1

Your code structure is on point, but the way you declared your object is incorrect.

Instead of treating test as an array, it should be defined as an object.

const test: testInterface = {
  name: {
    text: "something",
    anotherThing: "something"
  },
  foo: {
    text: "something",
    anotherThing: "something"
  },
  whatever: {
    text: "something",
    anotherThing: "something"
  }
};

this.testInterface.foo.text = "another text for example";

Answer 2

Your code structure is on point, but the way you declared your object is incorrect.

Instead of treating test as an array, it should be defined as an object.

const test: testInterface = {
  name: {
    text: "something",
    anotherThing: "something"
  },
  foo: {
    text: "something",
    anotherThing: "something"
  },
  whatever: {
    text: "something",
    anotherThing: "something"
  }
};

this.testInterface.foo.text = "another text for example";

Creating interactive features for a TypeScript interface

Answer №1

Similar questions

Is there a way to retrieve the chosen value from a select element?

Mastering the proper implementation of OneToMany and ManyToOne relationships in MongoDB involves understanding and utilizing the

The sequence of operations when assigning in Typescript with || and utilizing the array .find method

Converting a string array to an object leads to an issue where the element implicitly has an 'any' type, as the expression of type 'string' cannot be used to index the type '{}'

An error occured in angular2: Cannot access the 'title' property of undefined

Retrieving a variable value set within a jQuery function from within an Angular 2 component

Refreshing a page in Angular 4/5 using TypeScript

Writing Data to Google Cloud Firestore Map using NextJS and Typescript with nested objects

The Angular @Input directive may be prone to receiving inaccurate model data

The specified type cannot be assigned to the type 'IntrinsicAttributes & MoralisProviderProps'

Exploring the features of NextJS version 13 with the benefits

Several mat-radio-button options chosen within mat-radio-group

JavaScript placeholder-type expression

Can someone please explain how to bring in the Sidebar component?

Whenever I try to utilize async with React.FC in my React component, a TypeScript error is thrown

What is the best way to declare a TypeScript type with a repetitive structure?

Displaying decimal values in Angular as percentages

Ways to simulate a function that is a part of an internal object

create a fresh variable instead of appending it to the current object

Saving a local JSON file in Angular 5 using Typescript