TypeScript 中的 Angular 材质示例：芯片

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 中的数组时，我不确定如何在我的 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 假设这就是您的意思。