Angular Material Example in TypeScript: Chips

Question

I'd like to recreate the chips example seen here ( https://material.angularjs.org/latest/#/demo/material.components.chips ) in TypeScript, and as I'm fairly new (started learning it this week!), I'm a bit stuck with re-writing this from Javascript into TypeScript:

JS:

function mockLabels() {
      var labels = [
        {
          'name': 'hotel',
          'id': '1'
        },
        {
          'name': 'sport',
          'id': '2'
        },
        {
          'name': 'gaming',
          'id': '3'
        }           
      ];
      return labels.map(function (lab) {
        lab._lowername = lab.name.toLowerCase();
        return lab;
      });
    }

TypeScript:

private mockLabels: Array<Label> = [
            new Label(1, 'hotel'),
            new Label(2, 'sport'),
            new Label(3, 'gaming')
        ];

public getLabels() {
            return this.mockLabels;         
        }

As you can see, I'm not sure how to include .map in my TypeScript code when it's been assigned to an array in TypeScript.

How would I rewrite mockLabels to do so?

Answer 1

Note that JavaScript is TypeScript . So I would do the following (basically just add type annotations):

function mockLabels() {
  var labels:{
    name: string;
    id: string;
    _lowername?: string;
  }[] = [
    {
      'name': 'hotel',
      'id': '1'
    },
    {
      'name': 'sport',
      'id': '2'
    },
    {
      'name': 'gaming',
      'id': '3'
    }
  ];

  return labels.map(function (lab) {
    lab._lowername = lab.name.toLowerCase();
    return lab;
  });
}

Note : you had veg but the variable wasn't defined, I changed it to lab assuming that is what you meant.