Angular TypeScript and JavaScript treating Map differently

Question

I have defined an interface which goes something like following

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

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

I am trying to use the above interface as follows

@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"
    }
  }
}

Now the problem I am facing is that if I use any functions of the Map (set, get, entries, has) then Angular is happy and I can at least run 'ng serve' but then in the browser I keep getting error parameter property does not have function. And if I change those functions to JavaScript style (e.g. parameter["x"].access = "text" , parameters["x"] + "sometext" then Angular serve fails sometimes (Element implicitly has an 'any' type because type 'Map<string, Parameter>' has no index signature. Did you mean to call 'Parameter.get') but browser works always.

I tried to searched everywhere but didn't get any solution. Help is much appreciated.

Angular CLI: 11.0.1
Node: 14.15.0
OS: win32 x64

What version of JavaScript are you compiling to? In other words, what's your target in tsconfig.json? Also, what browser are you testing in? — Heretic Monkey
– Heretic Monkey, Commented Nov 17, 2020 at 13:51
the value is "target": "es2015", i am using Chrome Version 86.0.4240.198 — vk-code
– vk-code, Commented Nov 17, 2020 at 13:54
Your interface definition does not fit the example usage. For example parameters.parameter["X1"] == "true" doesn't make sense when parameters.parameter["X1"] is according to your interface an object with the properties access and value. — trixn
– trixn, Commented Nov 17, 2020 at 13:56
Also did you verify that parameters actually is a Map object? Your interface only defines what it should be, not what it is at runtime. — trixn
– trixn, Commented Nov 17, 2020 at 14:02
This is the code that consumes data from the pipe ; can you add the code that feeds data into that pipe ? Chances are it doesn't send values typed as you expect. — LeGEC
– LeGEC, Commented Nov 17, 2020 at 14:05

trixn · Accepted Answer · 2020-11-17 14:28:00Z

1

You likely want to have a dictionary-like type instead of a Map:

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

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

export interface Parameters {
   parameter: Dictionary<Parameter>;
}

This defines the parameter property of a Parameters object as a dictionary where the keys are strings and the values are of the Parameter type.

answered Nov 17, 2020 at 14:28

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vk-code Over a year ago

This has solved my problem. After so many comments, this one actually helped me. People often don't realize that not everyone has absolute knowledge or understanding of everything. Thank you so much!

trixn Over a year ago

@vk-code You are very welcome. Glad that it solved your issue.

Collectives™ on Stack Overflow

Angular TypeScript and JavaScript treating Map differently

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related