Using TypeScript, let's take a closer look at an example of Angular

Question

Using TypeScript, let's take a closer look at an example of Angular

I am trying to replicate the chips example found at this link (https://material.angularjs.org/latest/#/demo/material.components.chips) using TypeScript. I have just started learning TypeScript this week and I am having some difficulties translating this code from JavaScript to 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;         
        }

I am struggling to incorporate .map into my TypeScript code after assigning it to an array in TypeScript.

How can I modify mockLabels to achieve this?

javascript angularjs typescript angular-material

Answer 1

Answer №1

It's important to remember that TypeScript is essentially JavaScript with type annotations. To adjust the code accordingly, we can simply 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: The original code had a variable named veg which was not defined. I modified it to lab based on my assumption of your intention.

Answer 2

It's important to remember that TypeScript is essentially JavaScript with type annotations. To adjust the code accordingly, we can simply 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: The original code had a variable named veg which was not defined. I modified it to lab based on my assumption of your intention.

Using TypeScript, let's take a closer look at an example of Angular

Answer №1

Similar questions

Organize a collection of items in AngularJS

The JavaScript and CSS properties are not functioning properly with the HTML text field

Utilizing unique layouts for specific views in sails.js and angular.js

Discovering Unconventional Columns Through Sharepoint REST Api Filtration

The functionalities of ng-view in AngularJS

Transferring information from Controller to View seamlessly without altering the Route

`Zooming and scrolling feature within a masked image`

Unable to retrieve the user ID from a Discord username using Discord JS

Automatically updating client-side values in AngularJS using setInterval()

Ways to navigate back to the previous ajax request

"The controller seems to always return an 'undefined' value for the Angular

Guide to creating a functional Async API

Continuing a Sequelize transaction after a loop

Creating dynamic Kafka topic names within a NestJS microservice

What is the process for changing the output paper size to A4 in React Native (expo android)?

How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

I'd like some clarification on the code that dynamically adds routes using Typescript and Node Express. Can someone please

Tips for organizing checkboxes in rows horizontally

How can I update an image source using JavaScript in a Django project?

Failure to register Express Route