title: How do I cast a list of JSON objects into a list of TypeScript objects without losing properties on the TypeScript class?
body: <p>I have this Customer class:</p>
  
  <pre><code>export class Customer {
      id: number;
      company: string;
      firstName: string;
      lastName: string;
  
      name(): string {
          if (this.company)
              return this.company;
          if (this.lastName &amp;&amp; this.firstName)
              return this.lastName + ", " + this.firstName;
          if (this.lastName)
              return this.lastName;
          if (this.firstName)
              return this.firstName;
          if (this.id &gt; 0)
              return "#" + this.id;
          return "New Customer";
      }
  }
  </code></pre>
  
  <p>In my controller I pull down a list of customers:</p>
  
  <pre><code>export class CustomersController {
      static $inject = ["customerService", "workflowService"];
  
      ready: boolean;
      customers: Array&lt;Customer&gt;;
  
      constructor(customerService: CustomerService, workflowService: WorkflowService) {
          customerService.getAll().then(
              (response) =&gt; {
                  this.customers = response.data;
                  this.ready = true;
              },
              () =&gt; {
                  this.ready = true;
              }
          );
          workflowService.uiCustomer.reset();
      }
  }
  angular.module("app")
      .controller("CustomersController", ["customerService", "workflowService", CustomersController]);
  </code></pre>
  
  <p>If it helps, getAll() looks like this:</p>
  
  <pre><code>    getAll(): ng.IHttpPromise&lt;Array&lt;Customer&gt;&gt; {
          return this.http.get("/api/customers");
      }
  </code></pre>
  
  <p>It's this statement that's causing me grief: <code>this.customers = response.data;</code></p>
  
  <p>But response.data is strongly typed, so shouldn't it "know" about Customer and name()?</p>
  
  <p>When I do that, of course I am overwriting my strongly typed array with the dumb JSON one, which doesn't have my name() method on it.</p>
  
  <p>So how do I keep my name method without copying every property of every object in the list?</p>
  
  <p>Is this bad design on my part? Having these read-only properties was really common in C#, but I'm a little new to the javascript world. Should I be using a utility class instead?</p>
  
  <p>My current work-around:</p>
  
  <pre><code>this.customers = response.data.map(customer =&gt; {
      return angular.copy(customer, new Customer());
  });
  </code></pre>
  
  <p>Feels wrong to build a whole new array and copy all those fields (in my real project Customer has many more properties).</p>
  
  <p>Edit: I've found a few related SO questions, such as <a href="https://stackoverflow.com/questions/8783327/mapping-json-objects-to-javascript-objects">Mapping JSON Objects to Javascript Objects</a> as mentioned by @xmojmr. My question was specific to TypeScript and I was wondering if TypeScript had any facilities of its own that would generate the javascript to make this a non-issue. If that's not the case, and we're sure TypeScript doesn't aim to solve this class of problem, then we can regard this question as a duplicate.</p>