Differences in the treatment of Map objects by Angular TypeScript and JavaScript

Question

Differences in the treatment of Map objects by Angular TypeScript and JavaScript

Here is an example of an interface I have defined:

export interface Parameter {
   access: string;
   value: string;
}

export interface Parameters {
   parameter: Map<string, Parameter>;
}

In my code, I am trying to use the above interface like this:

@Pipe({ name: 'opStatus' })
export class OpStatusPipe {
  transform(parameters: Parameters): any {
    if (parameters.parameter["X1"].value == "true" &&
      parameters.parameter["X2"].value == "true") {
      return "Operational"
    } else {
      return "Not Operational"
    }
  }
}

The issue I am encountering is that when I use functions of the Map (such as set, get, entries, has) Angular allows me to run 'ng serve', but in the browser I keep getting an error saying

parameter property does not have function

. If I change those functions to JavaScript style (e.g.

parameter["x"].access = "text"

,

parameters["x"] + "sometext"

) then sometimes 'ng serve' fails with the error message

Element implicitly has an 'any' type because type 'Map<string, Parameter>' has no index signature. Did you mean to call 'Parameter.get'

, but the browser always works.

I have looked everywhere for a solution but haven't found one yet. Any help would be greatly appreciated.

Angular CLI: 11.0.1
Node: 14.15.0
OS: win32 x64

javascript angular typescript

Answer 1

Answer №1

To optimize your data structure, consider using a dictionary-like approach instead of relying on a Map:

interface Dictionary<T> {
    [Key: string]: T;
}

export interface Argument {
    key: string;
    value: string;
}

export interface Arguments {
   argument: Dictionary<Argument>;
}

This setup defines the argument attribute within an Arguments entity as a dictionary with string keys and values corresponding to the Argument type.

Answer 2

To optimize your data structure, consider using a dictionary-like approach instead of relying on a Map:

interface Dictionary<T> {
    [Key: string]: T;
}

export interface Argument {
    key: string;
    value: string;
}

export interface Arguments {
   argument: Dictionary<Argument>;
}

This setup defines the argument attribute within an Arguments entity as a dictionary with string keys and values corresponding to the Argument type.

Differences in the treatment of Map objects by Angular TypeScript and JavaScript

Answer №1

Similar questions

Using PHP to interact with Xbox API

Monitor the $scope within a factory by utilizing the $http service in AngularJS

Exploring the capabilities of Three.js and OrbitControls in TypeScript

Can you pinpoint the issue with this asynchronous function in Vue3?

Error: The service object is unable to bind to ngModel in Angular 5 due to a TypeError, as it cannot read the property 'state' of undefined within Object.eval

Setting the distance between marks on a material-ui slider is a handy customization feature to

Retrieving chosen row data in Angular 6 Material Table

Is it possible to adjust the timezone settings on my GraphQL timestamp data?

Resize a div within another div using overflow scroll and centering techniques

The jQuery closest selector seems to be malfunctioning when trying to scroll and focus on a specific class

When it comes to checking file types in JavaScript, JPEG files are causing issues while PNG files are being

Divide a list Observable into two parts

Error: When trying to run the server using npm, the program returned the message '. is not a recognized command, either internally or externally

Error in Typescript: The type '{ }[]' cannot be assigned to type '[]' when passing an array as a prop to a child component

Looking for assistance in grasping a complex Typescript function?

Using TypeScript for Geolocation

Change the background color of a MUI ToggleButton based on a dynamic selection

"Utilize jQuery to target textboxes that are positioned below others, rather than adjacent to them

`Is there a specific location for this code snippet?`

Transferring information using higher-level components