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.

I have an interface:

export interface Product {
  name?: string;
  image_rul?: string;
  description?: string;
  price?: number;
  quantity?: number;
}

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

For further explaining myself here's how I'm doing it:

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

When I run this I get an error:

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(…)

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

Thanks a lot.

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.

I have an interface:

export interface Product {
  name?: string;
  image_rul?: string;
  description?: string;
  price?: number;
  quantity?: number;
}

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

For further explaining myself here's how I'm doing it:

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

When I run this I get an error:

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(…)

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

Thanks a lot.

• javascript
• arrays
• typescript
• ionic2

Share Improve this question Follow asked Oct 17, 2016 at 12:38 LambasoftLambasoft 99922 gold badges1414 silver badges3636 bronze badges 1

• Possible duplicate: stackoverflow./questions/10673237/… – styfle Commented Oct 17, 2016 at 12:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In typescript when you define a class member:

class A {
    member: string[];
}

It doesn't really create that member in the piled js code:

var A = (function () {
    function A() {
    }
    return A;
}());

You need to intialize that member:

export class HomePage {
  products: Product[];

  constructor(public navCtrl: NavController) {
    this.products = [];
    ...

If you don't do that then it is undefined, which results in the error you posted.

You can also do it when declaring the member:

export class HomePage {
  products: Product[] = [];

Which will result in the same exact js code.