title: TypeScript class: statics and inheritance
body: <p>Questions:</p>
  
  <ol>
  <li>Is the behavior I'm observing the expected behavior for TypeScript?</li>
  <li>Is the behavior I'm observing the expected behavior for ECMAScript 6?</li>
  <li>Is there an easy way to walk back through the inheritance hierarchy to process the 'myStatic' array for each level? How do I know when to stop?</li>
  </ol>
  
  <p>Description: When using TypeScript, there appears to be some interesting behavior with derived classes and static properties.</p>
  
  <p><a href="http://www.typescriptlang.org/Playground#src=class%20MyBase%20%7B%0A%09static%20myStatic%20%3D%20%5B%5D%3B%0A%7D%0A%0Aclass%20MyDerived%20extends%20MyBase%20%7B%7D%0A%0AMyBase.myStatic%20%3D%20%5B&#39;one&#39;%2C%20&#39;two&#39;%2C%20&#39;three&#39;%5D%0A%0Aclass%20MyDerived2%20extends%20MyBase%20%7B%7D%0A%0Adocument.body.innerHTML%20%2B%3D%20%22%3Cb%3EMyDerived.myStatic%3A%3C%2Fb%3E%26nbsp%3B%22%20%2B%20JSON.stringify(MyDerived.myStatic)%20%2B%20%22%3Cbr%2F%3E%22%3B%0Adocument.body.innerHTML%20%2B%3D%20%22%3Cb%3EMyDerived2.myStatic%3A%3C%2Fb%3E%26nbsp%3B%22%20%2B%20JSON.stringify(MyDerived2.myStatic)%20%2B%20%22%3Cbr%2F%3E%22%3B" rel="nofollow">TypeScript Example</a></p>
  
  <pre><code>class MyBase {
      static myStatic = [];
  }
  
  class MyDerived extends MyBase {}
  
  MyBase.myStatic = ['one', 'two', 'three']
  
  class MyDerived2 extends MyBase {}
  
  document.body.innerHTML += "&lt;b&gt;MyDerived.myStatic:&lt;/b&gt;&amp;nbsp;" + JSON.stringify(MyDerived.myStatic) + "&lt;br/&gt;";
  document.body.innerHTML += "&lt;b&gt;MyDerived2.myStatic:&lt;/b&gt;&amp;nbsp;" + JSON.stringify(MyDerived2.myStatic) + "&lt;br/&gt;";
  </code></pre>
  
  <p>This is the result:</p>
  
  <pre><code>MyDerived.myStatic: []
  MyDerived2.myStatic: ["one","two","three"]
  </code></pre>
  
  <p>Edit: Adding example that illustrates different behavior between TypeScript and ECMA Script 6.  Note: ECMA Script doesn't support static properties, so these examples use static methods.</p>
  
  <p>TypeScript Code:</p>
  
  <pre><code>class MyBase {
    static myStatic() { return []; }
  }
  
  class MyDerived extends MyBase {}
  
  MyBase.myStatic = () =&gt; { return ['one', 'two', 'three']; }
  
  class MyDerived2 extends MyBase {}
  
  document.body.innerHTML += "&lt;b&gt;MyDerived.myStatic:&lt;/b&gt;&amp;nbsp;" + JSON.stringify(MyDerived.myStatic()) + "&lt;br/&gt;";
  document.body.innerHTML += "&lt;b&gt;MyDerived2.myStatic:&lt;/b&gt;&amp;nbsp;" + JSON.stringify(MyDerived2.myStatic()) + "&lt;br/&gt;";
  </code></pre>
  
  <p>TypeScript Results:</p>
  
  <pre><code>MyDerived.myStatic: []
  MyDerived2.myStatic: ["one","two","three"]
  </code></pre>
  
  <p>ECMA Script 6 Code: <a href="http://www.es6fiddle.net/i4jn7xzj/" rel="nofollow">ES6 Fiddle</a></p>
  
  <pre><code>class MyBase {
    static myStatic() { return []; }
  }
  
  class MyDerived extends MyBase {}
  
  MyBase.myStatic = () =&gt; { return ['one', 'two', 'three']; };
  
  class MyDerived2 extends MyBase {}
  
  console.log("MyDerived.myStatic: " + JSON.stringify(MyDerived.myStatic()));
  console.log("MyDerived2.myStatic: " + JSON.stringify(MyDerived2.myStatic()));
  </code></pre>
  
  <p>ECMA Script 6 Results</p>
  
  <pre><code>MyDerived.myStatic: ["one","two","three"]
  MyDerived2.myStatic: ["one","two","three"]
  </code></pre>