Ionic 2 - TypeScript | Populate an array of interface objects
<p>I really did my homework before asking this question, I'm sure some of you would find it foolish, but I'm still kind of new to Typescript and I'm totally struggling with this.</p>

<p>I have an interface:</p>

<pre><code>export interface Product {
  name?: string;
  image_rul?: string;
  description?: string;
  price?: number;
  quantity?: number;
}
</code></pre>

<p>I'm trying to create an array of type Product and fill that array with random values.</p>

<p>For further explaining myself here's how I'm doing it:</p>

<pre><code>export class HomePage {
  products: Product[];
  constructor(public navCtrl: NavController) {
    for (var i=0; i&lt; 10; i++) {
      var random: number =  Math.floor(Math.random() * 10) + 1;
      this.products[i] = &lt;Product&gt;{
        name: `Test_${i}`,
        image_rul: "https://unsplash.it/200/?random",
        description: "This is a short description",
        price: random,
        quantity: i
      };
    }
    console.log(this.products);
  }
}
</code></pre>

<p>When I run this I get an error:</p>

<pre><code>polyfills.js:3 Error: Uncaught (in promise): Error: Error in ./HomePage class HomePage_Host - inline template:0:0 caused by: Cannot set property '0' of undefined(…)
</code></pre>

<p>Please could you lead me to the right direction ? What am I doing wrong or how can I fix it ?</p>

<p>Thanks a lot.</p>