title: Passing arrays to a constructor in TypeScript
body: <p>I started building an Idle Game (like cookie clicker - but so much worse!) in TypeScript.  I am new to TypeScript, and mostly JavaScript too.  </p>
  
  <p>The issue came up when I changed "cost" from a number, to type "Cost".  The idea behind cost being that some later objects (like the winged rat), would cost several resources, and not just scrap.  I suspect my implementation of Cost is going wrong somewhere, or the constructor is not built right.  Or it's not instantiated correctly.  </p>
  
  <p>Currently, when checking "resourceList["rat"].cost.costList["scrap"]", it comes back as undefined.  This leads to the "rat" button staying disabled forever.</p>
  
  <pre><code>class Resource {
      name: string;
      amount : number;
      cost: Cost;
      value: number;
      display() : string
      {
          if(this.amount - Math.floor(this.amount) &gt; 0)
          {
              return this.amount.toFixed(2);
          }
          else
              return this.amount.toString();
      }
  }
  
  class Cost {
      costList: { [id: string] : number; } = {};
      constructor(res:string[], cost:number[]){
          var i = 0;
          for(var r in res)
          {
              var c = cost[i];
              this.costList[r] = c;
              i++;
          }
          return this;
      }
  }
  
  class Scrap extends Resource {
      constructor(public amount) {
          super();
          this.name = "scrap";
          this.cost = new Cost([""],[0]);
          document.getElementById('scrapLbl').innerHTML = this.name + ": ";
      }
  }
  
  class Rat extends Resource {
      constructor(public amount) {
          super();
          this.name = "rat";
          this.cost = new Cost(["scrap"],[10]);
          this.value = 1;
          document.getElementById('ratLbl').innerHTML = this.name + ": ";
      }
  }
  
  class wRat extends Resource {
      constructor(public amount) {
          super();
          this.name = "wrat";
          this.cost = new Cost(["scrap", "rat"],[10, 1]);
          this.value = 1;
          document.getElementById('wratLbl').innerHTML = this.name + ": ";
      }
  }
  
  var resourceList: { [id: string] : Resource; } = {};
  var curScrap = new Scrap(0);
  var curRat = new Rat(0);
  var curWRat = new wRat(0);
  resourceList["scrap"] = curScrap;
  resourceList["rat"] = curRat;
  resourceList["wrat"] = curWRat;
  
  function updateView()
  {
      document.getElementById('scrapId').innerHTML = resourceList["scrap"].display();
      document.getElementById('ratId').innerHTML = resourceList["rat"].display();
      if(resourceList["scrap"].amount &gt;= resourceList["rat"].cost.costList["scrap"])
      {
          document.getElementById('scrapRat').disabled = false;
      }
      else
      {
          document.getElementById('scrapRat').disabled = true;
      }
      document.getElementById('ratId').title = resourceList["rat"].cost.toString();
  }
  
  function updateValues()
  {
      if(resourceList["rat"].amount &gt; 0)
          resourceList["scrap"].amount += (resourceList["rat"].value * resourceList["rat"].amount)/10;
  }
  
  function collectScrap()
  {
      resourceList["scrap"].amount += 1;
  }
  
  function scrapRat()
  {
      //cost
      resourceList["scrap"].amount -= resourceList["rat"].cost.costList["scrap"];
      //create
      resourceList["rat"].amount += 1;
      //update cost
      resourceList["rat"].cost.costList["scrap"] *= 1.12;
  }
  
  window.setInterval(function(){
      this.updateValues();
      updateView();
  }, 100);
  </code></pre>
  
  <p>Not sure if you need the HTML, but here it is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Scrap Clicker&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css" media="screen"&gt;
      &lt;script src="js/jquery-2.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;label id="scrapLbl" &gt;&lt;/label&gt; &lt;span id="scrapId"&gt;0&lt;/span&gt;
  &lt;label id="ratLbl" &gt;&lt;/label&gt; &lt;span id="ratId"&gt;0&lt;/span&gt;
  &lt;label id="wratLbl" &gt;&lt;/label&gt; &lt;span id="wratId"&gt;0&lt;/span&gt;
  &lt;div&gt;
      &lt;button title="Free" data-toggle="popover" data-trigger="hover" data-content="Dig!" class="btn btn-lg btn-primary" onclick="collectScrap()"&gt;collect scrap&lt;/button&gt;
      &lt;button title="10 Scrap" data-toggle="popover" data-trigger="hover" data-content="Strap some scrap to a rat, now you've got a Scrap-Rat!" class="btn btn-lg btn-primary" onclick="scrapRat()" id="scrapRat" disabled&gt;scrap rat&lt;/button&gt;
      &lt;button title="10 Scrap, 1 rat" data-toggle="popover" data-trigger="hover" data-content="Strap some scrap to a Scrap-Rat, now you've got a Flying-Scrap-Rat!" class="btn btn-lg btn-primary" onclick="wRat()" id="wRat" disabled&gt;Winged scrap rat&lt;/button&gt;
  
  &lt;/div&gt;
  &lt;script src="game.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Bonus Points:</strong> Show me a better way to keep track of resources and costs!</p>