在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;

它會按您期望的那樣工作。