TypeScript 中的 Angular 材质示例：芯片

Posted 2023-03-13

【中文标题】TypeScript 中的 Angular 材质示例：芯片

【英文标题】：Angular Material Example in TypeScript: Chips

【发布时间】：2015-12-28 22:34:05

【问题描述】：

我想在 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 来做到这一点？

【参考方案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 假设这就是您的意思。

【讨论】：

这是否会导致 Array 出现问题？

取决于你如何定义Label