Best way to create objects

Ionic Framework ionic-v3
1

Hello guys, I have the code down below and it works. Problem is I don’t understand what’s going on.

export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<any>;

  Product(name, numberInStock, wantedNumber,     presentation, productType: String[], brands?:     String[]) {
this.name = name;
this.numberInStock = numberInStock;
this.wantedNumber = wantedNumber;
this.presentation = presentation;
this.productType = productType;
this.brands = brands;
  }
 
  constructor(public navCtrl: NavController,     public navParams: NavParams) {

// If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

this.items = [];
for (let i = 1; i < 11; i++) {
  this.items.push(new this.Product("Sandwich Bread", 0, 1, "Bag", ["Breads"]));
  this.items.push(new this.Product("Milk", 1, 2, "Carton", ["Dairy", "Drinks"]));
  this.items.push(new this.Product("Bananas", 1, 1, "Hand", ["Breads"]));
}

  }

  itemTapped(event, item) {
// That's right, we're pushing to ourselves!
this.navCtrl.push(ListPage, {
  item: item
});
  }
}

  1. Vscode says this.name, this.numberInStock, etc does not exist in list page but the code still works (I take the IDE takes it as an undeclared global variable while it actually behaves as an attribute of Product?). Which one is it?

  2. If I declare the variables the error goes away (yay), but when I print them they are undefined (nay?)

export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<any>;
  name: String; //Here
  Product(name, numberInStock, wantedNumber,     presentation, productType: String[], brands?:     String[]) {
this.name = name;
this.numberInStock = numberInStock;
this.wantedNumber = wantedNumber;
this.presentation = presentation;
this.productType = productType;
this.brands = brands;
  }
...
for (let i = 1; i < 11; i++) {
  this.items.push(new this.Product("Sandwich Bread", 0, 1, "Bag", ["Breads"]));
  this.items.push(new this.Product("Milk", 1, 2, "Carton", ["Dairy", "Drinks"]));
  this.items.push(new this.Product("Bananas", 1, 1, "Hand", ["Breads"]));
    }
console.log(this.name); //undefined
}
  1. I think its pretty obvious what I want to do here but could you point me out on the best way to do it? Maybe a provider that receives the data, creates and return the product? Thanks.
2

If you don’t get any better answers, I suggest always using interfaces instead of classes for business objects, which means you should very rarely need to be typing new. The way you are doing it now with positional parameters is very brittle and hard to read. I would much prefer something like so:

interface Product {
  name: string;
  numberInStock: number;
  numberWanted: number;
  presentation: string;
  productType: string[];
  brands?: string[];
}

items: Product[] = [];
...
this.items.push({
  name: "Sandwich Bread",
  numberInStock: 0,
  numberWanted: 1,
  presentation: "Bag",
  productType: ["Breads"],
});
3

Alright, looks pretty straightforward. Thanks!