Creating an array object in TypeScript is a straightforward process

Question

Creating an array object in TypeScript is a straightforward process

Working on an Angular 4 project, I am attempting to declare an attribute in a component class that is an object containing multiple arrays, structured like this:

history: {
  Movies: Array<Media>,
  Images: Array<Media>,
  Music: Array<Media>,
};

The Media interface has the following properties:

export interface Media {
  size: number,
  name: String
}

When trying to push objects into the history elements like this:

this.history.Music.push(music);

Where music has the same type (Media), it throws the error:

1449 ERROR TypeError: Cannot read property 'Music' of undefined

This issue seems to be related to the declaration.

Note: I have tried declaring the arrays as both empty and with initial values, but the error persists.

javascript arrays angular typescript

Answer 1

Answer №1

Set up the history object by initializing it with various properties set to an empty array

history: {Movies: Array<Media>, Images: Array<Media>, Music: Array<Media>} = {
  Movies: [],
  Images: [],
  Music: []
};

Answer 2

Set up the history object by initializing it with various properties set to an empty array

history: {Movies: Array<Media>, Images: Array<Media>, Music: Array<Media>} = {
  Movies: [],
  Images: [],
  Music: []
};

Answer 3

Answer №2

If you want to manage historical media items, consider creating a History class:

class History {
    constructor(public Movies: Media[] = [], public Images: Media[] = [], public Music: Media[] = []){}
}

In your component, initialize the history property as follows:

history = new History();

Now you can easily perform actions like adding music to your history:

this.history.Music.push(music);

Answer 4

If you want to manage historical media items, consider creating a History class:

class History {
    constructor(public Movies: Media[] = [], public Images: Media[] = [], public Music: Media[] = []){}
}

In your component, initialize the history property as follows:

history = new History();

Now you can easily perform actions like adding music to your history:

this.history.Music.push(music);

Creating an array object in TypeScript is a straightforward process

Answer №1

Answer №2

Similar questions

Utilizing Vue.js to connect with a Node.js server

Tips for setting or patching multiple values in an ngselect within a reactive form

Disabling and enabling a link before and after an AJAX call using jQuery

Setting up AngularJS can be a pain

Contrasting @Input with Dependency Injection in Angular 10

Preserve a data point without causing any alterations

Watch as jQuery preloads every select list

Split the text using the newline character (' ') and not the double newline character (' ')

Is there a way for me to initiate another joyride adventure?

Tips for incorporating a fresh attribute into a class through a class decorator

Unable to access property 'scrollToBottom' as it is undefined

Is it necessary to convert an HTMLCollection or a Nodelist into an Array in order to create an array of nodes?

"Upon clicking the login button, I encountered an issue with redirecting to the destination

Unbounded AngularJS 1.x looping of Ag-grid's server-side row model for retrieving infinite rows

Tips for organizing MUI Card effectively within a React application using TypeScript

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

Showing off map positions on D3 using data from a JSON array

UPDATE: Choosing several classes and then toggling the classes independently for each one

Would you be able to clarify why the run() function is giving me an error when I try to return {1,3}, but it works fine when I return {a,b} in

Is there a way to validate form input before inserting it into a database using the onsubmit event?