ES5 vs ES6 Javascript for Arrays

Question

I am trying to convert the following to work, but I think it is an Es5/ES6 issue. Help Appreciated.

this.rows = Array.from(Array(Math.ceil(this.subCategoryModels.length / 3)).keys());

I currently get typscript errors:

[ts] 
Property 'from' does not exist on type 'ArrayConstructor'.
any

and

[ts] 
Property 'keys' does not exist on type 'any[]'.
any

Answer 1

Property 'from' does not exist on type 'ArrayConstructor'.

This points to the fact that you want to use ES6 type definitions while still compiling to ES5.

Recommend the lib option in TypeScript latest:

"compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom"]
}

More

https://basarat.gitbooks.io/typescript/content/docs/types/lib.d.ts.html#lib-option

Answer 2

Since you're seeing these errors, I'm assuming you're compiling to ES5. You can use typings to make Typescript recognize the es2015 functions for arrays.

First, install typings if not already installed.

npm install typings --global

Once you've installed typings, install type type definitions for ES2015 array functions.

typings install -SG env~es2015-array

If you're targeting a browser that does not support the new Array functions, you'll also need to add a polyfill.

Answer 3

I ended up doing the following:

html

  <ion-row *ngFor="let trio of getTriples()">
    <ion-col *ngFor="let item of trio" (click)="itemTapped(item)">
      <div class="row responsive-md">
        <div id="icon-image-{{item.id}}"><img src="data:image/png;base64,{{item.icon}}" height="75" width="75" /></div>
        <p>{{item.name}}</p>
      </div>
    </ion-col>
  </ion-row>

typescript

  getTriples() {
    let triples = [];
    let length = this.subCategoryModels.length;
    for (let i = 0; i < length; i += 3) {
      let trio = [];
      trio.push(this.subCategoryModels[i]);
      if (i + 1 < length) {
        trio.push(this.subCategoryModels[i + 1]);
      }
      if (i + 2 < length) {
        trio.push(this.subCategoryModels[i + 2]);
      }
      triples.push(trio);
    }
    return triples;
  }