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

Issue with converting form data to JSON format

Strategies for handling user typos in a JavaScript prompt

What is the process for retrieving the result of a promise at a later time?

Node.js API requests often result in undefined responses

What steps are required to transition an Angular application developed without the Angular CLI into an Angular CLI project?

Creating dummy objects from a specific data type in Typescript for the purpose of testing

TypeError: Unable to find TextEncoder in mongoose and jest when using TypeScript

The system does not acknowledge "ENVIRONMENT" as a command that can be executed either internally or externally, or as a batch file that can be

Loading JavaScript in the background using Java and HtmlUnit

The NodeJs and Express API, integrated with Ejs files, encounters a crash when attempting to retrieve data from the database on the second attempt

Error encountered in SelectInput.js file of React MUI 4: line 340 - TypeError: Unable to access properties of undefined (specifically 'value')

What could be the reason for the counter not being incremented when the button is clicked

Function exhibiting varying behavior based on the form from which it is called

Generic parameter with a union type

Setting up Storybook with Tailwindcss, ReactJS and Typescript: A comprehensive guide

Is it possible to send the value of an array to a client along with a JavaScript file using a read

The mouseenter event in jQuery is failing to trigger

Angular Universal: Execution of ngAfterViewInit occurring on the server side rather than the client side

JavaScript makes Chrome Hard Reload a breeze

Automatically choose radio buttons within an li element in a loop