在angular 5中获得结果后，如何确保打字稿界面属性为大写？

Question

我有一个Web API返回以下结果

{
  "customerContactID": 1,
  "customerID": 1,
  "firstName": "james",
  "lastName": "smithman",
  "primaryEmail": "james@gmail.comm",
  "primaryPhone": "8788494677",
  "isPrimaryContact": true
}

我有一个angular 5应用程序，它定义了一个界面

    interface CustomerContact {
      CustomerContactID: number;
      CustomerID: number;
      FirstName: string;
      LastName: string;
      PrimaryEmail: string;
      PrimaryPhone: string;
      IsPrimaryContact: boolean;
  }

并使用返回结果

            this.http.get<CustomerContact>(url).subscribe(result => {
            console.log("CustomerContact obtained");
            console.log(result); // prints lowercase properties
            this.customerContact = result;
        }, error => console.error(error));

不幸的是，当我记录结果时，我可以看到所有属性都是小写的，因此我无法执行以下操作

this.currentCustomer = result.CustomerID;

由于导致未定义。 但是，我需要能够将变量值设置为从api结果获得的值，特别是result.CustomerID。 打字稿不允许我做

this.currentCustomer = result.customerID;

因为它导致

TS2551: Property 'customerID' does not exist on type 'CustomerContact'. Did you mean 'CustomerID'?

尽管发生编译器[加载程序]错误，如何将变量的值设置为result.customerID的值？

我完全不能更改API合同，而且，我的打字稿界面必须对属性名称使用UpperCase。

UPDATE 1如下面提到的@pArth savadiya，看来我可以做到这一点

虽然，我不确定是否会产生影响

我不相信这是将返回的JSON对象属性转换为（最低优先级）camelCase的副本，因为该问题的结果模型具有大写的属性，这不是我在这里的意思。

UPDATE 2经过一番仔细观察，我意识到这里最大的问题是api响应属性框和angular / typescript框不匹配之间的MISTMATCH。 如果它们不相同，则会导致问题并导致奇怪的解决方法。 解决方案就是将接口外壳与响应外壳相匹配，以满足这一特定要求。 就这么简单。 谢谢大家。

Answer 1

在您的代码中，您将HTTP响应结果与typescript接口（CustomerContact）紧密结合在一起，而不是使用它。

 this.http.get <any> (url).subscribe(result => { console.log("CustomerContact obtained"); console.log(result); // prints lowercase properties this.customerContact = result; }, error => console.error(error)); 

那么您就可以编写this.currentCustomerID = result.customerID;

或者您也可以这样尝试：this.currentCustomer = result [“ customerID”];

Answer 2

与JavaScript相比，TypeScript有助于做出关于类型的明确选择，即关于代码的设计。 您的问题确实与Angular应用程序的设计决策有关。

它有助于推理考虑体系结构中的各层：WebApi，获取其数据的服务和UI组件不在同一层中。

您可以决定拥有“ CustomerContact”：

1. 所有层中的类型相同：
   • 此类型由WebApi定义，因此所有字段都在camelCase中： interface CustomerContact { customerContactID: number… } ，您可以执行http.get<CustomerContact>(url) 。
   • 从短期来看，它很便宜，但从长远来看，它很昂贵，因为WebApi签名的任何更改都可能引起所有层中多个文件的大量更改！
2. 不同类型：
   • WebApi方法返回一个DTO ： interface CustomerContactDto { customerContactID: number… }和http.get<CustomerContactDto>(url) 。 如果要保持TypeScript提供的类型安全性，请不要使用any类型。
   • 即使PascalCase的C＃约定比TypeScript的约定更多，域层也会处理CustomerContact ，无论您希望使用哪种字段，无论您想要使用哪种字段（camelCase，PascalCase等）。
   • 作为ACL的一部分，包含http.get<CustomerContactDto>(url)将在两种类型之间进行映射，以返回CustomerContact 。 可以简单地逐字段完成此映射： const customerContact = new CustomerContact(); customerContact.CustomerContactID = result.customerContactID; … const customerContact = new CustomerContact(); customerContact.CustomerContactID = result.customerContactID; … const customerContact = new CustomerContact(); customerContact.CustomerContactID = result.customerContactID; … 。

Answer 3

在您的界面更改

CustomerID: number;

至

customerID: number;

它会按您期望的那样工作。