title: JSON object with nested objects, all needing to be casted to classes in Typescript/Angular 5
body: <p>Have done quite a bit of research on this but my situation seems to be a tad more complex than other examples i've seen on stack. I hope my explanation is clear enough to follow!</p>
  
  <p>The API response I am working with is structured as an array of <code>Customers</code>. Each <code>Customer</code> has methods of its own as well as multiple nested objects. For the purposes of this question I'll focus on the <code>Addons</code> nested object (so <code>Customer.Addons</code>). <code>Addons</code> has some methods as well as an array of objects (addons). Each array item is an <code>Addon</code> object. So...I need to cast each level as the prototype of the associated Class. </p>
  
  <p>This seems to work fine for <code>Customer</code>: </p>
  
  <pre><code>Object.setPrototypeOf(customer, Customer.prototype)
  </code></pre>
  
  <p>I am stuck on <code>Addons</code> even though I am using the same approach:</p>
  
  <pre><code>Object.setPrototypeOf(customer.addOns, Addons.prototype)
  </code></pre>
  
  <p>And for the array of addons (type <code>Addon</code>) I am iterating through like so. THIS seems to be working fine as well:</p>
  
  <pre><code>_.each(customer.addOns, (addon: Addon) =&gt; {
      Object.setPrototypeOf(addon, Addon.prototype)
  })
  </code></pre>
  
  <p>When I console.log this stuff, I can see that the <code>Customer</code> object is getting recognized as <code>Customer</code>. I can see that array items are correctly getting recognized as type <code>Addon</code>, but the <code>Addons</code> object, that middle layer, seems to be a plain object.</p>
  
  <p>This image captures what I mean. Parent object of type <code>Customer</code>, child named addons with an array of items all of type <code>Addon</code>:
  <a href="https://i.stack.imgur.com/Wt4Iz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wt4Iz.png" alt="enter image description here"></a></p>
  
  <p>Here is my <code>Addons</code> class. It extends a generic class whose sole job is to have an array with some basic CRUD methods. The <code>getSubtotal</code> method is just returning a hard coded number for now (for testing) but will ultimately iterate through the associated array in its <code>super</code> and add numbers. </p>
  
  <pre><code>export class Addons extends PluralOfType&lt;Addon&gt; {
  
      constructor() {}
  
      ...
  
      getSubTotal(): number {
          // eventually will return _.reduce(super.arr, ...) etc
          return 10
      }
  
  }
  </code></pre>
  
  <p>Here is a segment from the <code>PluralOfType</code> generic:</p>
  
  <pre><code>class PluralOfType&lt;T&gt; {
  
      public arr: T[] = [];
  
      getAll(): T[] { return this.arr };
  
      ...
  
  }
  </code></pre>
  
  <p>In my other typescript files, if I do this:</p>
  
  <pre><code>console.log(customer.addOns)
  </code></pre>
  
  <p>I will get the array of addons, each of type <code>Addon</code>. If I do this:</p>
  
  <pre><code>console.log(customer.addOns.getSubtotal())
  </code></pre>
  
  <p>I will get <code>10</code>, which is correct. If I do this, which is a method on addOns superclass: </p>
  
  <pre><code>console.log(customer.addOns.getAll())
  </code></pre>
  
  <p>I get undefined. Moreover, because <code>arr</code> is public in the superclass, unsure why I can't just call <code>customer.addOns.arr</code>. </p>
  
  <p>Clearly I am missing something here. Hopefully it's a simple fix! Appreciate any help. </p>