javascript - TypeScript 中的 Angular Material 示例 : Chips

Question

我想在 TypeScript 中重新创建此处看到的芯片示例 ( https://material.angularjs.org/latest/#/demo/material.components.chips )，并且由于我相当新(本周开始学习它!)，我有点无法从Javascript 转换为 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;         
        }

如您所见，当 .map 被分配给 TypeScript 中的数组时，我不确定如何将 .map 包含在我的 TypeScript 代码中。

我如何重写mockLabels来做到这一点？

Answer 1

请注意，JavaScript 是 TypeScript。所以我会执行以下操作(基本上只是添加类型注释):

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;
  });
}

注意:您有 veg 但变量未定义，我将其更改为 lab 假设这就是您的意思。