How do I ensure typescript interface properties are uppercase after I obtain result in angular 5?

Question

I have a web api that returns the following result

{
  "customerContactID": 1,
  "customerID": 1,
  "firstName": "james",
  "lastName": "smithman",
  "primaryEmail": "[email protected]",
  "primaryPhone": "8788494677",
  "isPrimaryContact": true
}

and I have an angular 5 app that defines an interface as

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

and return the result using

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

Unfortunately, when i log the result, I can see that the properties have all been lowercased, so I cannot do something such as

this.currentCustomer = result.CustomerID;

Since it results in undefined. However, I need to be able to set a variable value to the value obtained from the api result, specifically result.CustomerID. Typescript does not allow me to do

this.currentCustomer = result.customerID;

since it results in

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

How do I set the value of a variable to the value of result.customerID despite the compiler [at-loader] error?

I cannot change the API contract at all, also, my typescript interface must have UpperCase for property names.

UPDATE 1 as @pArth savadiya mentioned below, It looks like I can do this

Although, Im not sure if the repercussions, if any

I dont believe this is a duplicate of Convert returned JSON Object Properties to (lower first) camelCase since that question has a result model that has uppercase properties, which is not what I have here.

UPDATE 2 After some close observation ,I realized that the big issue here was the MISTMATCH between the api response property casing and the angular/typescript casing mismatch. Without them being the same, it causes issues and forces odd workarounds. The solution simply was to match the interface casing with the response casing for this particular request. Its that simple. Thank you everyone.

Answer 1

In your code you tightly coupled HTTP response result with your typescript interface(CustomerContact) use instead of it.

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

then you can able to write this.currentCustomerID = result.customerID;

or you can try like this: this.currentCustomer = result["customerID"];