title: Typescript with Polymer
body: <p>I know that there have been other questions on this topic but none of the answers have been particularly helpful and some are out of date so I thought I would ask again.</p>
  
  <p>Has anyone had any luck with getting Polymer and Typescript to play nice? It seems like its very almost there, ideally we want to supply a class instance or prototype to polymer then it takes care of the rest.</p>
  
  <p>For example given the following:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  
  &lt;polymer-element name="my-element" attributes="color"&gt;
      &lt;template&gt;       
          Hello there &lt;strong&gt;{{name}}&lt;/strong&gt;
          &lt;button on-click="{{setFocus}}"&gt;Set focus to text input&lt;/button&gt;
      &lt;/template&gt;
      &lt;script src="my-element.js"&gt;&lt;/script&gt;    
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>If we do this:</p>
  
  <pre><code>class MyElement {
      name = "Mike";
      setFocus() {
          console.log("called");        
      }
  }
  Polymer(new MyElement());
  </code></pre>
  
  <p>Then we get "name" outputted correctly but clicking the button does not call the function.</p>
  
  <p>However if we do this:</p>
  
  <pre><code>class MyElement {
      name = "Mike";
      setFocus() {
          console.log("called");        
      }
  }
  Polymer(MyElement.prototype);
  </code></pre>
  
  <p>Then we get the console output when we click the button but the variable is undefined.</p>
  
  <p>Anyone have any clue how we get these to play nice?</p>