Typescript with polymer

Question

I know that there were other questions on this topic, but none of the answers were particularly helpful, and some were out of date, so I thought I would ask again.

Is anyone lucky that Polymer and Typescript played well? It seems that he is almost there, ideally we want to provide an instance of the class or prototype for the polymer, then he will take care of the rest.

For example, the following is specified:

<link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="my-element" attributes="color"> <template> Hello there <strong>{{name}}</strong> <button on-click="{{setFocus}}">Set focus to text input</button> </template> <script src="my-element.js"></script> </polymer-element> 

If we do this:

 class MyElement { name = "Mike"; setFocus() { console.log("called"); } } Polymer(new MyElement()); 

Then we get the correct name, but pressing the button does not call the function.

However, if we do this:

 class MyElement { name = "Mike"; setFocus() { console.log("called"); } } Polymer(MyElement.prototype); 

Then we get the console output when we press the button, but the variable is undefined.

Does anyone have a clue on how we get them to play well?

Answer 1

The default field values ​​are set in the constructor, but when passing the prototype to Polymer() it does not have access to the constructor.

Instead, set the default values ​​in the created callback. It’s a bit of a hack, but it’s not limited only to Typescript, I came across the same thing as for the closing-compiler style classes for use as polymer elements.

 class MyElement { name : string; created() { this.name = "Mike"; } setFocus() { console.log("called"); } } Polymer(MyElement.prototype); 

Answer 2

I wrote a library to handle just this, check out https://github.com/nippur72/PolymerTS , but it only works with the new Polymer (> = 1.0, which is),