Angular TypeScript 和 JavaScript 对待 Map 的方式不同答案

【问题标题】：Angular TypeScript and JavaScript treating Map differentlyAngular TypeScript 和 JavaScript 对待 Map 的方式不同
【发布时间】：2020-11-17 13:38:17
【问题描述】：

我已经定义了一个类似于下面的接口

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

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

我正在尝试使用上面的界面如下

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

现在我面临的问题是，如果我使用 Map 的任何功能（设置、获取、条目、拥有），那么 Angular 很高兴，我至少可以运行“ng serve”，但是在浏览器中我不断得到错误parameter property does not have function。如果我将这些函数更改为 JavaScript 样式（例如 parameter["x"].access = "text"、parameters["x"] + "sometext"，那么 Angular 服务有时会失败（Element implicitly has an 'any' type because type 'Map<string, Parameter>' has no index signature. Did you mean to call 'Parameter.get'）但浏览器总是可以工作。

我试图到处搜索，但没有得到任何解决方案。非常感谢您的帮助。

Angular CLI: 11.0.1
Node: 14.15.0
OS: win32 x64

【问题讨论】：

您要编译到哪个版本的 JavaScript？换句话说，你在 tsconfig.json 中的target 是什么？另外，你测试的是什么浏览器？
值为"target": "es2015",我正在使用Chrome Version 86.0.4240.198
您的接口定义不符合示例用法。例如，当parameters.parameter["X1"] 根据您的界面是具有属性access 和value 的对象时，parameters.parameter["X1"] == "true" 没有意义。
您还确认parameters 实际上是Map 对象吗？你的界面只定义它应该是什么，而不是它在运行时是什么。
这是使用管道数据的代码；您可以添加将数据馈送到该管道到的代码吗？它可能不会发送您期望的输入值。

标签： javascript angular typescript

【解决方案1】：

您可能希望使用类似字典的类型而不是 Map：

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

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

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

这将Parameters 对象的parameter 属性定义为一个字典，其中键是字符串，值是Parameter 类型。

【讨论】：

这解决了我的问题。经过这么多的cmet，这一个实际上帮助了我。人们常常没有意识到，并不是每个人都对一切都有绝对的知识或理解。非常感谢！
@vk-code 非常欢迎您。很高兴它解决了您的问题。