What is a Generic Type in an Array?

Question

What is a Generic Type in an Array?

Currently, I'm working on designing a mockup app that displays data in the form of buttons in a list. I have successfully implemented most of the features but I have encountered a problem. I have initialized an array and another class to manage the data.

-items.ts

  export class ItemPage {

  items: Item[] = [];

  constructor() {

    this.items.push(
      new Item(1, 'Apple', 'Green', 6, true));
    this.items.push(
      new Item(2, 'Banana', 'Yellow', 15, false));
  }

The data class is structured like this

-item.ts

export class Item {
  constructor(
    id: number,
    fruit: string,
    color: string,
    quantity: number,
    onStock: boolean,
  ) { }
}

Currently, I'm facing an issue with items: Item[] = []; when I run ionic serve. The error message states

Generic type 'Item' requires 2 type argument(s)

and

type Item<K extends string, T> = { [P in K]: T; } Construct a type with a set of properties K of type T

.
I have tried to troubleshoot it on my own but haven't been successful. Does anyone have an idea on how to resolve this?

Thank you

angular typescript ionic2

Answer 1

Answer №1

I attempted to recreate the issue, but instead, I ended up with two empty objects. It appears that the error is related to not setting the properties in your class as public. To resolve this, simply adjust your class like so:

export class Item {
  constructor(
    public id: number,
    public fruit: string,
    public color: string,
    public quantity: number,
    public onStock: boolean,
  ) { }
}

After making this change, everything seemed to work properly: Plunker

HOWEVER, I would recommend using interfaces instead, especially if you do not require functions within classes or have another specific reason. You can create an interface like so:

export interface Item {
  id: number;
  fruit: string;
  color: string;
  quantity: number;
  onStock: boolean;
}

constructor(private navController: NavController) {
  this.items.push({id:1, fruit:'Apple', color:'Green', quantity:6, onStock:true});
  this.items.push({id:2, fruit: 'Banana',color:'Yellow',quantity:15,onStock:false})
}

I hope this information proves helpful!

Answer 2

I attempted to recreate the issue, but instead, I ended up with two empty objects. It appears that the error is related to not setting the properties in your class as public. To resolve this, simply adjust your class like so:

export class Item {
  constructor(
    public id: number,
    public fruit: string,
    public color: string,
    public quantity: number,
    public onStock: boolean,
  ) { }
}

After making this change, everything seemed to work properly: Plunker

HOWEVER, I would recommend using interfaces instead, especially if you do not require functions within classes or have another specific reason. You can create an interface like so:

export interface Item {
  id: number;
  fruit: string;
  color: string;
  quantity: number;
  onStock: boolean;
}

constructor(private navController: NavController) {
  this.items.push({id:1, fruit:'Apple', color:'Green', quantity:6, onStock:true});
  this.items.push({id:2, fruit: 'Banana',color:'Yellow',quantity:15,onStock:false})
}

I hope this information proves helpful!

What is a Generic Type in an Array?

Answer №1

Similar questions

The ForbiddenError has struck again, this time wreaking havoc in the realms of Node.js, Express.js

Identified the category

A guide on logging errors triggered within reducers

Transform array sequences into their own unique sequences

add the string to the chat messages array in the observable

I'm unable to import correctly using the --compiler option

Navigating with Angular 2: Redirecting Azure AD login URI

Is it possible for me to change a selector value?

Are there any more efficient methods to retrieve an object from an arrow function in TypeScript?

The output from the second request using RxJS

Determining the location of an input field in Angular

How can Typescript generics verify the value type for a specific key in a generic object?

Tips for setting up nested folders using Node.js on a Windows machine:

Dealing with Undefined TypeScript Variables within an array.forEach() loop

What is the best way to represent a directory structure in JSON using a C# data type?

Issue with subscribing in a MEAN stack application

Master the Art of Scrolling Lists in Ionic 2

Using TypeScript for abstract methods and polymorphism

Using TypeOrm QueryBuilder to establish multiple relations with a single table

Changing a string into a date format with the help of JavaScript AngularJS